Question

这是我的代码无效的部分：

.copyright {
  display: flex;
  flex-wrap: nowrap;
  /* This is not working */
  color: red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>Sample</p>
<span>
  <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
  </li>
  <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
  </li>
</span>
<br><br>
<p class="copyright">
  <span>I want this left from icons</span>
  <span>
   <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
   </li>
   <li class="fa-stack">
    <i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
    <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
   </li>
  </span>
</p>

您知道为什么flexwrap: nowrap;无效吗？我的图标位于范围下方，而不是位于右侧。

Answer 1

它不起作用，因为flex-wrap: nowrap适用于弹性项目，而不适用于项目内的文本。您需要使用white-space: nowrap定位文本。

.copyright {
     display:flex;
     flex-wrap: nowrap;   /* will prevent flex items on the same line from wrapping */
     white-space: nowrap; /* will prevent text from wrapping */
}

jsFiddle demo

Answer 2

我只需要用<p class="copyright">更新<div class="copyright">

或者我可以将display:block用于p.copyright

Answer 3

只需提供版权类display: inline-block;

Answer 4

只需要一个普通的包装，例如div并显示flex

div {
display: flex;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>Sample</p>
<span>
 <li class="fa-stack">
  <i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
 </li>
 <li class="fa-stack">
  <i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
 </li>
</span>
<br><br>
<p class="copyright">
  <div>
    <span>I want this left from icons</span>
    <span>
 <li class="fa-stack">
  <i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
  <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
 </li>
 <li class="fa-stack">
  <i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
 </li>
</span>
  </div>

</p>

Answer 5

要在一行中按顺序看到的元素或图标，然后将它们放在具有flex的div元素中。而且您不需要像使用正确的html顺序一样需要flex-wrap属性，只需使用display：flex属性即可处理大多数事情

在此处查看https://jsfiddle.net/b6vw9t2y/38/
<div style='display: flex'> <i>icon1></i> <i>icon2</i> <i>icon3</i> </div> 输出：icon1 icon2 icon3

通过下面的链接了解flexbox的基础知识，它易于理解，当您掌握flexbox时，一定会使您的生活更加轻松

https://www.w3schools.com/css/css3_flexbox.asp

Flexbox“ nowrap”值不起作用

5 个答案: