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>

这是一个工作小提琴：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

Answer 2

您可以使您的显示内联块，以便它不会添加中断。

.navbar-default li {
   display:inline-block;
}

jsfiddle

Answer 3

将display:inline添加到<div>

Answer 4

你可以这个css：

width: 50%;
float: left;
display: inline;

在第一个里面的div里面和

display: inline;
float: right;

以上css for div in second li

对齐导航栏中的元素

4 个答案: