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

Question

My jsFiddle is here : https://jsfiddle.net/r1s6651y/1/

I am not able to get Navigation with Numerals to be aligned horizontally.

I have applied display : inline-block for upper ul but still the next menu item begins on the second line.

Any clues ?

It should be stacked as :

1111111    22222222

AAAAAAAAAAAAA

BBBBBBBBBBBBB

Answer 1

You can't have li with width: 100%; and then expect them to align next to eachother. Ofcourse they naturally fall to 2 lines instead of 1, they're inline elements after all (Think of it like this: the <p> tag is also "inline" bu default. When the text in a <p> is too long, the text "breaks" to a new line. As will your li when it is set to be inline) . You also want the li to next to eachother, not the ul which is what contains the li . So apply the display: inline-block; to the (correct) li elements

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

Answer 2

Two things. As already noted, you want the li items to be display:inline . You also need to remove the width:100% from the li s of #myRow . Then it will collapse and display inline as long as the container is wide enough for them (otherwise it will wrap).

 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> 

Answer 3

Man, you do some mistakes. I fixed it at: https://jsfiddle.net/r1s6651y/4/

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

Answer 4

put a class on the li you want horizontal, then add 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>