Question

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

Answer 1

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

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

Answer 2

我打算试一试。假设您有这样的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结构，我可以帮助你更好......

Answer 3

是的，可以使用媒体查询。以下是文档：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/

当<span>无法适应屏幕宽度时，我可以获得<span>更改的CSS吗？

3 个答案: