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

【问题标题】：Background Colour width when hovering over text悬停在文本上时的背景颜色宽度
【发布时间】：2015-03-07 23:22:25
【问题描述】：

我现在很卡住，我正在开发一个网站，我已经对导航栏上列表的高度进行了排序，但现在我想扩大宽度，所以当我将鼠标悬停在它上面时，背景颜色会覆盖一个稍大的区域，而不是刷到文本的末尾。

我尝试过填充它，但似乎只是将文本稍微移动，然后在该区域内居中。

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

这是我目前拥有的 CSS。我将不胜感激！

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;
}

<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>

【问题讨论】：

也添加 HTML 标记
已编辑，添加了 HTML 标记。

标签： html css

【解决方案1】：

这就是你要找的东西吗？

Solution

我们从父元素中移除宽度，并使用padding 制作链接block 元素

.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 insted。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

http://jsfiddle.net/mj8Lh31x/

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;
}

<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>

【讨论】：