<ul>显示内联块不起作用

<ul> display inline-block not working

本文关键字：不起作用 gt lt ul 显示      更新时间：2023-09-30

我的jsFiddle在这里：https://jsfiddle.net/r1s6651y/1/

我无法使数字水平对齐的导航。

我已经将display : inline-block应用于上ul，但下一个菜单项仍然从第二行开始。

有线索吗？

应堆叠为：

1111111    22222222
AAAAAAAAAAAAA
BBBBBBBBBBBBB

不能让li和width: 100%;并排排列。当然，它们自然会降到2行而不是1行，毕竟它们是内联元素（可以这样想：<p>标记在默认情况下也是"内联"的。当<p>中的文本太长时，文本会"断开"到一行。当它设置为内联时，li也会断开）。您还希望li挨着，而不是包含li的ul。因此，将display: inline-block;应用于（正确的）li元素

    ul#myRow li {
      width: auto; //could also be set to 50%  if it's just 2 li elements
      display: inline-block;
    }

两件事。如前所述，您希望li项为display:inline。您还需要从#myRow的li中删除width:100%。然后，只要容器足够宽，它就会折叠并内联显示（否则它会换行）。

li {
  background: #00945f;
  border-bottom: 1px solid #016e39;
  clear: both;
  float: none;
  height: 62px;
  margin: 0;
  padding: 0 30px 30px;
  width: 100%;
}
ul { 
  list-style-type: none;
}
ul#myRow li {
  display:inline-block;
  width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <ul id="myRow" class="row">
    <li>
      <a href="" class="active">11111111</a>
    </li>
    <li>
      <a href="">2222222</a>
    </li>
  </ul>
  <ul class="row">
    <li>
      <a href="">AAAAAAAAAAAAAAa</a>
    </li>
    <li>
      <a href="">BBBBBBBBBBBBBBB</a>
    </li>
  </ul>
</section>

伙计，你犯了一些错误。我把它固定在：https://jsfiddle.net/r1s6651y/4/

li {
    display: inline-block;
    background: #00945f;
    border-bottom: 1px solid #016e39;
    margin: 0;
    padding: 10px 20px;
}

在想要水平的li上放一个class，然后添加css display: inline

.horiz {
  display: inline;
}
<section>
  <ul id="myRow" class="row">
    <li class="horiz">
      <a href="" class="active">11111111</a>
    </li>
    <li class="horiz">
      <a href="">2222222</a>
    </li>
  </ul>
  <ul class="row">
    <li>
      <a href="">AAAAAAAAAAAAAAa</a>
    </li>
    <li>
      <a href="">BBBBBBBBBBBBBBB</a>
    </li>
  </ul>
</section>

相关文章：