html - 在导航栏中对齐元素

Question

我正在尝试实现一个带有搜索栏和登录名的小导航栏。我的问题是通常我会使用 display:flex但这次我想尝试别的东西。所以我决定给我 <li> -元素属性display:inline ，这当然不适合我。

CSS:

* {
    margin:0;
    box-sizing:border-box;
}
html {
    display:block;
}
body {

  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
  line-height: 1.42857143;

}

a {
  color: #00B7FF;
}
.navbar-default {
    position:relative;
    min-height: 50px;
    background-color: #f8f8f8;
    border-color: #e7e7e7;
}

.container-fluid {
    padding-right:30px;
    padding-left:30px;
    margin-left:auto;
    margin-right:auto;
}

.navbar-default ul {
    list-style: none;
    display:inline;
}

.navbar-default li {
    display:inline;
}

HTML:

<nav class="navbar-default">
    <div class="container-fluid">
        <ul class="navbar-default nav">
            <li>
                <div id="search" class="search-navbar">
                    <input type="search"> 
                    <input type="button" value="Search">
                </div>
            </li>
            <li>
                <div id="login" class="login-navbar">
                    <input type="text">
                    <input type="password">
                    <input type="button" value="Sign in">
                </div>
            </li>
        </ul>
    </div>
</nav>

这是一个有效的 fiddle :https://jsfiddle.net/rvfd5h5e/

我想要的是将搜索栏放在左侧(但不在边缘)，将登录放在右侧。

我希望有人能帮我解决这个问题。

Answer 1

尝试使用 display:inline-block 和 float:right

CSS

.navbar-default ul {
    list-style: none;
    display:block;
    clear: both;
    line-height: 3em;
}
.navbar-default li, .navbar-default li div {
    display:inline-block;
}
.navbar-default li:last-child {
    float: right;
}

DEMO HERE