Question

我一直在关注本教程：

http://www.mrc-productivity.com/techblog/?p=1049

我想让导航栏中的单个项目向右浮动，但只需添加float：right;那个特定的项目没有做任何事情。实际上，将float：left更改为float：right只会颠倒导航栏项的顺序。

这是一个片段：

＆＃13;

@CHARSET "UTF-8";

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

#wrap {
	width: 100%;
	height: 50px;
	margin: 0;
	z-index: 99;
	position: relative;
	background-color: #366b82;
}

.navbar {
	height: 50px;
	padding: 0;
	margin: 0;
	position: absolute;
	border-right: 1px solid #54879d;
}

.navbar li {
	height: auto;
	width: 150px;
	float: left;
	text-align: center;
	list-style: none;
	font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
	padding: 0;
	margin: 0;
	background-color: #366b82;
}

#navright {
	float: right;
}

.navbar a {
	padding: 18px 0;
	border-left: 1px solid #54879d;
	border-right: 1px solid #1f5065;
	text-decoration: none;
	color: white;
	display: block;
}

.navbar li:hover, a:hover {
	background-color: #54879d;
}

.navbar li ul {
	display: none;
	height: auto;
	margin: 0;
	padding: 0;
}

.navbar li:hover ul {
	display: block;
}

.navbar li ul li {
	background-color: #54879d;
}

.navbar li ul li a {
	border-left: 1px solid #1f5065; 
	border-right: 1px solid #1f5065; 
	border-top: 1px solid #74a3b7;
	border-bottom: 1px solid #1f5065;
}

.navbar li ul li a:hover {
	background-color: #366b82;
}

＆＃13;

<body>
	<div id="wrap">
		<ul class="navbar">
			<li><a href="/dashboard">Home</a></li>
			<li><a href="#">Registers</a>
				<ul>
					<li><a href="#">People</a></li>
				</ul>
			</li>
			<li><a href="#">Operational</a></li>
			<li><a href="#">Financial</a></li>
			<li><a href="#">Reports</a></li>
			<li id="navright"><a id="logout" href="/login">Logout</a></li>
		</ul>
	</div>
</body>

＆＃13;

<li id="navright"><a id="logout" href="/login">Logout</a></li>

只需要得到那个＆＃34;退出＆＃34;按钮位于右侧。

Answer 1

使包含的UL元素的宽度为100％

.navbar {
    height: 50px;
    width: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    border-right: 1px solid #54879d;
}

https://jsfiddle.net/txve55jn/2/

使导航栏项向右浮动

1 个答案: