javascript - 当<span>无法适应屏幕宽度时,我可以获得<span>更改的CSS吗?

javascript - 当<span>无法适应屏幕宽度时,我可以获得<span>更改的CSS吗?,第1张

当我减小屏幕宽度时,是否有一种方法可以修改元素的css,使其保持一致而不是下降到下一行?

最佳答案:

3 个答案:

答案 0 :(得分:1)

如果要强制span在父标记上保持内联使用display:inline-flex;。像这样:

<div style="display: inline-flex;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
<span>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</div>

答案 1 :(得分:0)

我打算试一试。假设您有这样的HTML结构:

<dom-module id="get-products-service">
  <style>
    :host {
     display: none;
    }
  </style>
<template>
  <iron-ajax id="productsajax"
    url="http://localhost:3003/api/products"
    params='{"token":"mytoken"}'
    method='GET'
    on-response='productsLoaded'
    handleAs="json"
    loading="{{loading}}" >
  </iron-ajax>
  </template>
</dom-module>

<script>
 (function() {

   Polymer({is: 'get-products-service',

     properties: {
       products: {
       type: Array,
       notify: true
     }, 
    page: {
      type: String,
      notify: true,
    },
    perpage: {
      type: String,
      readOnly: true,
      value: "6"
    },
    loading: {
      type: Boolean,
      readOnly: true,
      notify: true,
      value: false
    }
  },

productsLoaded: function(request) {
  console.log(this.$.productsajax.lastResponse);
  responseObject = this.$.productsajax.lastResponse;
  this.products = responseObject.products;
},

ready: function(){
  this.$.productsajax.params.page = this.page;
  this.$.productsajax.params.per_page = this.perpage;
},
observers: [
          'attributesReady(page)'
        ],

attributesReady: function(page) {
    this.page = page;
    this.$.productsajax.params.page = page;
    this.$.productsajax.params.per_page = this.perpage;
    console.log("service page: " page);
    this.async(function() {
        this.$.productsajax.generateRequest();
      }, 3000);
  }
 });
})();
</script>

你希望你的跨度保持一致,你可以使用&#34; white-space:nowrap;&#34;:

<div class="keepInLine">
     <span>This is a span</span>
     <span>This is another span</span>
</div>

由于span元素默认为内联,因此将它们保持在一行中。 参考:W3CSchools

对于上面这样的简单示例,不需要使用媒体查询。但是,如果您的HTML结构不同或者您想要其他内容,则可能需要使用媒体查询。

例如,如果您想要更改SPAN元素的宽度,以便它们完全适合您的屏幕,则需要媒体查询:

.keepInLine{
    white-space: nowrap;
 }

或者您可以用百分比来定义跨度的宽度:

@media (max-width: 600px) {
  .keepInLine span {
display:inline-block;
    width:300px;
  }
}

这也将使他们并肩。

如果我知道你的HTML结构,我可以帮助你更好......

答案 2 :(得分:-1)

是的,可以使用媒体查询。以下是文档:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

但这是一个简单的例子:

div{
  width: 300px;
  background-color: red;
}

@media (min-width: 700px){
    div{
        width: 150px;
        background-color: green;
    }
}

还有一些阅读https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复