Question

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

我无法使用Numerals导航水平对齐。

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

任何线索？

它应该堆叠为：

1111111    22222222

AAAAAAAAAAAAA

BBBBBBBBBBBBB

Answer 1

您不能printf("<%s%s>\n", "foo", "bar");与li，然后期望它们彼此对齐。当然，它们自然地落到2行而不是1行，它们都是之后的内联元素（想象一下：width: 100%;标签也是“内联”默认。当{{{{{{{ 1}}太长，文本“中断”为新行。当<p>设置为内联时。。您还希望<p>在彼此旁边，而不是包含li的{{1}}。因此，将li应用于（正确的）ul元素

li

Answer 2

两件事。如前所述，您希望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; }的{{1}}中删除li。然后只要容器足够宽，它就会折叠并显示内联（否则它会换行）。

display:inline

width:100%

Answer 3

伙计，你犯了一些错误。我将其修改为：https://jsfiddle.net/r1s6651y/4/

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

Answer 4

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

＆＃13;

.horiz {
  display: inline;
}

＆＃13;

<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>

＆＃13;

<ul>显示内联块无法正常工作

4 个答案: