对齐水平UL和DIV

Question

我有一个问题要对齐水平DIV和UL，检查小提琴：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

Answer 2

试试这个：

#menuOnglet{width:100px; margin: 0 auto;}
.box-header{text-align:center;}