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

When I decrease the width of my screen is there a way to modify the css of a element so it stays in line rather than drop to the next line?

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

3 个解决方案

#1

If you want to force span's to stay inline use display:inline-flex; on the parent tag. Like so:

如果你想强制span's保持内联使用display：inline-flex;在父标签上。像这样：

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

#2

I am going to give it a shot. Suppose you have a HTML structure like this:

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

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

And you want your spans to keep in line, you can use "white-space: nowrap;":

而且你希望你的跨度保持一致，你可以使用“white-space：nowrap;”：

.keepInLine{
    white-space: nowrap;
 }

Since the span elements are inline by default, this will keep them in one line. reference: W3CSchools

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

For a simple example like above, there is no need to use media queries. However, if your HTML structure is different or you want something else, you might need to use media queries.

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

For example, if you want to change the width of your SPAN elements, so they completely fit on to your screen, you will need media queries:

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

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

Or you can define the width of your spans in percentage:

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

.keepInLine span{
     width:50%;
  }

This will also keep them side by side.

这也将使它们并排。

I could help you better if I would know yout HTML structure though...

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

#3

-1

Yes, it is possible, just use Media queries. Here are the docs: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

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

But here is a simple exmaple:

但这是一个简单的例子：

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

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

and some more reading https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

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

#1