Question

我现在非常困难，我正在网站上工作，我的导航栏上的列表高度已经排序，但现在我想让宽度更大，所以当我将鼠标悬停在它上面时背景颜色覆盖了一个稍大的区域，而不是在文本的末尾刷新。

我已尝试填充它，但似乎只是略微移动文本，然后将文本置于该区域的中心。

图片（没有足够的嵌入声誉）：http://i.imgur.com/pAxT3gb.png

这是我目前拥有的CSS。我很感激任何帮助！

＆＃13;

html {
	margin: 0;
}
body {
	padding: 0;
	margin: 0;
	border: 0;
}
.navigation {
	font-family: Arial;
	font-size: 16px;
	font-weight: lighter;
	background-color: #555;
	color: white;
	width: 100%;
	height: 72px;
	background-image: url("images/download.png");
}
.navigation ul {
	list-style-type: none;
	text-decoration: none;
}
.navigation li {
		height: 100%;
		width: 80px;
		display: inline-block;
		padding-top: 25px;
		float: right;
		margin-right: 120px;
}
.navigation li a {
	text-decoration: none;
	color: white;
}
.navigation li a:hover {
	height: 100%;
	padding-top: 25px;
	padding-bottom: 30px;

	width: 80px;
	background-color: #556;
}

＆＃13;

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	</head>


	<body>
		<div class="navigation">
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
			</ul>
		</div>

	</body>
</html>

＆＃13;

Answer 1

这就是你要找的东西。

Solution

我们从父级移除宽度，并使用block

创建链接padding元素

.navigation li {
  display: inline-block;
  float: right;
  margin-right: 120px;
}

.navigation li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 26px 30px;
}

.navigation li a:hover {
  background-color: #556;
}

让li浮动right会使你的链接顺序陷入困境，考虑浮动父ul。{/ p>

Answer 2

您需要将悬停状态应用于li而不是a，这是我的建议：

html {
	margin: 0;
}
body {
	padding: 0;
	margin: 0;
	border: 0;
}
.navigation {
	font-family: Arial;
	font-size: 16px;
	font-weight: lighter;
	background-color: #555;
	color: white;
	width: 100%;
	height: 72px;
	background-image: url("images/download.png");
}
.navigation ul {
	list-style-type: none;
	text-decoration: none;
}
.navigation li {
		height: 100%;
		width: 80px;
		display: inline-block;
		padding-top: 25px;
		float: right;
		padding-left: 25px;
        margin-right: 95px;
}
.navigation li a {
	text-decoration: none;
	color: white;
}
.navigation li:hover {
	height: 100%;
	padding-top: 25px;
	padding-bottom: 30px;

	width: 80px;
	background-color: #556;
}

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	</head>


	<body>
		<div class="navigation">
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
			</ul>
		</div>

	</body>
</html>

Answer 3

http://jsfiddle.net/mj8Lh31x/

＆＃13;

html {
  margin: 0;
}
body {
  padding: 0;
  margin: 0;
  border: 0;
}
.clearfix {
  clear: both;
}
.navigation {
  font-family: Arial;
  font-size: 16px;
  font-weight: lighter;
  background-color: #555;
  color: white;
  background-image: url("images/download.png");
}
.navigation ul {
  float: right;
  margin: 0px;
  list-style-type: none;
  text-decoration: none;
}
.navigation li {
  padding: 30px 0px;
  display: inline-block;
}
.navigation li a {
  padding: 30px 25px;
  text-decoration: none;
  color: white;
}
.navigation li a:hover {
  background-color: #556;
}

＆＃13;

<div class="navigation">
  <ul>
    <li><a href="#">Link 1</a>
    </li>
    <li><a href="#">Link 2</a>
    </li>
    <li><a href="#">Link 3</a>
    </li>
    <li><a href="#">Link 4</a>
    </li>
  </ul>
  <div class="clearfix"></div>
</div>

＆＃13;

背景悬停在文本上时的颜色宽度

3 个答案: