Question

我如何将这个ul li置于以下div / nav中，我使用了Basic bootstrap类

 <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="collapse navbar-collapse" id="app-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Start</a></li>
                    <li><a href="#">foo</a></li>
                    <li><a href="#">nav1</a></li>
                    <li><a href="#">nav2</a></li>
                    <li><a href="#">nav3</a></li>
                    <li><a href="#">nav4</a></li>
                    <li><a href="#">nav5</a></li>
                    <li><a href="#">nav6</a></li>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

Simple cross platform way to do it:

.container #app-navbar-collapse {
  width: 100%
}

#app-navbar-collapse ul {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

Way more cross platform than flexbox. If you're going to go the flex route, use proper fallbacks, ie:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Otherwise that stuff is going to look broken on iOS/safari/IE, etc

Answer 2

div的样式，使用flexbox：

.container {
  display: flex;
  justify-content: center;
}

Codepen：here

但说实话，我会将它附加到类似.container--centered类的东西上，以免污染引导程序。

div中的Css center ul li

2 个答案: