html - 水平对齐 UL 和 DIV

Question

我在水平对齐 DIV 和 UL 时遇到问题，请检查 fiddle :HERE

可以看到DIV和UL不在同一行。

<div class="col-md-12">
    <div class="box-header">
        <h4 class="box-title">Title</h4>
    </div>
    <ul id="menuOnglet" class="nav nav-pills">
        <li class="active">Elem1</li>
        <li>Elem2</li>
        <li>Elem3</li>
    </ul>
</div>

#menuOnglet{width:300px; margin-left:auto; margin-right:0;}

我不想用另一个 DIV 包装我的 UL。谢谢!

Answer 1

您可以使用一个简单的 CSS 声明来做到这一点:

div, ul, li {
    display: inline-block;    /* this will align all div, ul, li elements on the webpage horizontally */
}

#menuOnglet{width:300px; margin-left:auto; margin-right:0;}

div, ul, li {
    display: inline-block;    
}

<div class="col-md-12">
    <div class="box-header">
        <h4 class="box-title">Fiche contact : Jean paul</h4>
    </div>
    <ul id="menuOnglet" class="nav nav-pills">
        <li class="active">Elem1</li>
        <li>Elem2</li>
        <li>Elem3</li>
    </ul>
</div>

Updated jsFiddle