Question

我浮动了导航栏右侧的2个链接，但是输入字段上升了。它应该像按钮一样停留在导航栏的中间位置。这是代码：

＆＃13;

*{
	margin: 0px;
	padding: 0px;
}

body{
	background-color: rgb(226, 220, 220);
}

nav{
	width: 100%;
	background-color: #2C2C2F;
}

nav > .nav_ul{
	width: 1000px;
	margin: 0px auto;
	font-size: 0px;
}

nav > .nav_ul > .nav_li{
	display: inline-block;
	margin: 10px 0px;
	font-size: 16px;
	margin-right: 20px;
}

nav > .nav_ul > .nav_li_last_child{
	margin-right: 0px;
}

nav > .nav_ul > .nav_li > .nav_a{
	text-decoration: none;
	padding: 10px 10px;
	background-color: #E56E04;
	display: block;
	color: white;

	border: 1px solid #E56E04;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

nav > .nav_ul > .nav_search{
	position: relative;
	display: inline-block;
}

nav > .nav_ul > .nav_search > .nav_searchfield{
    width: 300px;
    font-size: 16px;
 	padding: 10px;
    display: inline-block;
    background-color: #545455;
    color: white;

    border: 1px solid black;
    border-right: none;

    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
}

nav > .nav_ul > .nav_search > .fa-search{
	font-size: 16px;
	display: inline-block;
	padding: 11.5px;
	background-color: #545455;
	color: black;

	border: 1px solid black;
    border-left: none;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
}


/* ------------------ */

.float_right{
	float: right;
}

.float_left{
	float: left;
}

.clear_both{
	clear: both;
}

＆＃13;

<!DOCTYPE>
<html>
	<head>
		<link href="backbone/general.css" rel="stylesheet" type="text/css"/>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
	</head>

	<body>
		<nav>
			<ul class="nav_ul">
				<div class="nav_search">
					<input class="nav_searchfield" type="text" placeholder="Search ..." />
					<span class="fa fa-search"></span>
				</div>
				<li class="nav_li float_right nav_li_last_child"><a href="#" class="nav_a">Login</a></li>
				<li class="nav_li float_right"><a href="#" class="nav_a">Register</a></li>

				<div class="clear_both"></div>
			</ul>
		</nav>
	</body>
</html>

＆＃13;

我创建了一个风格为clear: both的div。我把他放在两个链接下面。但这没有任何帮助。

Answer 1

按钮使用边距居中，也可以使用搜索，如下所示：

nav > .nav_ul > .nav_search{
    margin: 10px 20px 10px 0px;
}

FIDDLE：https://jsfiddle.net/lmgonzalves/dsr0o7dn/

在导航栏中使用float

1 个答案: