我有一个带浮动的ul列表：对于li。 我想将其设置为页面中心。 保证金和左边的效果不好。
我希望当鼠标悬停在链接上时，保持其他链接的位置并且不要向前移动。
我的css代码是这样的：
#menu2 li a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu2 li a:hover {
border: none;
font-size: 30px;
}
<!--===============================================================<!--===============================================================--> --> ul,
li {
display: inline-block;
}
#menu2 ul {
list-style-type: none;
background-color: #003;
text-align: center;
}
#menu2 li {
float: left;
list-style-type: none;
padding: 15px 15px;
}
#menu2 {
min-width: 800px;
margin-top: 15%;
right: 65% !important;
}
#menu2 li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
background-color: #093;
transition: all 0.5s ease 0s;
font-size: 18px;
min-width: 95px;
border-radius: 50px;
}<div align="center" style="height:100%;width:100%;">
<div class="menu" id="menu2" align="center">
<ul>
<li><a href="brands.php">Brands</a></li>
<li><a href="contact.php"> Contact </a></li>
<li><a href="price.php"> Price List </a></li>
<li><a href="about.php"> About </a></li>
<li><a href="index0.php"> Home </a></li>
</ul>
</div>
</div>
我该如何解决这个问题？ 我使用a：之后但不起作用。
答案 0 :(得分：0)
我已添加到您的CSS中，我将悬停文本大小更改为25px，将按钮宽度更改为135px并添加到空格中：nowrap到锚标记。
发生的事情是当你悬停文字时会长大并包裹，因为它无法容纳在你的容器中，所以我把它包起来并且还使按钮容器的宽度更大以适应放大
我希望这就是你所追求的，因为当悬停时按钮不再在页面上移动。
编辑：在你的ul标签中添加了CSS = float：left;所以你的按钮就坐在里面，达到了深蓝色的背景。
#menu2 li a {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu2 li a:hover {
border:none;
font-size:25px; /*Changed by Steve */
}
<!-- ===============================================================
<!--=============================================================== -->
-->
ul,li
{
display:inline-block;
}
#menu2 ul
{
list-style-type: none;
background-color: #003;
text-align:center;
float:left;
}
#menu2 li {
float: left;
list-style-type:none;
padding:15px 15px;
}
#menu2
{
min-width:800px;
margin-top:15%;
right:65% !important;
}
#menu2 li a {
display: table-cell;
vertical-align:middle;
color: white;
text-align: center;
text-decoration: none;
background-color:#093;
transition: all 0.5s ease 0s;
font-size:18px;
min-width:95px;
width:135px; /*CHANGED by Steve*/
height:48.8px;
border-radius: 50px;
white-space:nowrap; /*ADDED by Steve */
}
答案 1 :(得分：0)
通过使用div替换li并使用以下属性编写CSS样式并更改div的CSS代码，问题得以解决。 谢谢大家
<div align="center" style="height:100%;width:100%;">
<div class="menu" id="menu2" align="center" >
<div style="z-index:18;position:absolute;margin-right:25px;text-align:center;vertical-align:middle;" align="center" ><a href="brands.php">Brands</a></div>
<div style="z-index:17;position:absolute;margin-right:155px;"><a href="contact.php"> Contact </a></div>
<div style="z-index:16;position:absolute;margin-right:265px;"><a href="price.php"> Price List </a></div>
<div style="z-index:15;position:absolute;margin-right:405px;"><a href="about.php"> About </a></div>
<div style="z-index:14;position:absolute;margin-right:520px;"><a href="index0.php"> Home </a></div>
</div>
</div>