Question

当我将鼠标悬停在一个元素上时，该元素本身会扩展，而另一个字体会在字体大小变大时进行调整。如何停止呢？

红色背景也发生了相同的情况，因此我设置了height: 38px;以避免扩展：

header {
    position: relative;
    top: 10px;
    margin: 0 auto;
    height: 38px;
    width: 100%;
    background: red;
}

现在，我尝试将高度和宽度设置为单个<li>，以查看它是否完全不会移动/扩展，但不起作用：

<li style="width: 130px; height: 38px;"><a href="homepage.html">Home</a></li>

* {
    margin: 0;
    padding: 0;    
}

body {
    background: royalblue;
    font-family: monospace;  
}

header {
    position: relative;
    top: 10px;
    margin: 0 auto;
    height: 38px;
    width: 100%;
    background: red;
}
.parent-ul {
    position: relative;
    top: 0px;
    list-style: none;
    text-align: center;
    padding: 11px 0;
}

.parent-ul li {
    margin: -4px;
    display: inline;
    padding: 7px 13px;
    border-left: 1px solid silver;
    transition: background 1s, border 1s, 
                border-radius 1s;
}

#prod {
    border-right: 1px solid silver;
    padding-right: 15px;
}

.parent-ul a {
    text-decoration: none;
    color: white;
    padding: 0px 50px;
    font-size: 14px;
    transition: color 1s, font-size .5s;
}

/* Effects ================================ */

li:hover {
    background: black;
    border: 0;
    border-radius: 2px;
}

li:hover + li  {
border: 0;
}

li:hover a {
    color: gold;
    font-size: 18px;
}

#prod:hover {
    border: 0;
}

<body>   
     <header>
       <ul class="parent-ul">
      
            <li style="width: 130px; height: 38px;"><a href="homepage.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Services</a></li>
            <li id="prod"><a href="index.html">Products</a></li>
            
        </ul>      
     </header>
</body>

Answer 1

Yoy可以使用float: left和box-sizing: border-box来对齐导航项。另外，请使用padding : 0，以便在放大文本时使其居中。这是一个示例：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: royalblue;
    font-family: monospace;  
}

header {
    position: relative;
    margin: 0 auto;
    height: 38px;
    width: 100%;
    background: red;
}
.parent-ul {
    position: relative;
    list-style: none;
    text-align: center;
}

.parent-ul li {
    height: 38px;
    width: 20%;
    float: left;
    transition: background 1s, border 1s, 
                border-radius 1s;
}

.parent-ul li:not(:first-child) {
    border-left: 1px solid silver;
}

.parent-ul a {
    text-decoration: none;
    color: white;
    padding: 0;
    font-size: 14px;
    transition: color 1s, font-size .5s;
    line-height: 38px;
}

/* Effects ================================ */

li:hover {
    background: black;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}

li:hover a {
    color: gold;
    font-size: 18px;
}

<body>   
     <header>
       <ul class="parent-ul">
      
            <li><a href="homepage.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="index.html">Products</a></li>
            
        </ul>      
     </header>
</body>

Answer 2

您需要设置其display属性，以使其接受元素的height和width。

尝试一下

<li style="display:inline-block;width: 130px; height: 38px;"><a href="homepage.html">Home</a></li>

Answer 3

我尝试使用其他方法。您可以缩放文本（使用<span></span>标签包裹），而不用更改字体大小。看看这个https://jsbin.com/fekihusasi/edit?html,css,output。

Answer 4

您可以使用Transform：scale（1.3，1.3）;当您将鼠标悬停在文本上时。看一下这个：https://plnkr.co/edit/JG3Y1PmLJK2hiL8JNGSy

CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: royalblue;
  font-family: monospace;
}

header {
  position: relative;
  margin: 0 auto;
  height: 38px;
  width: 100%;
  background: red;
}

.parent-ul {
  list-style: none;
  text-align: center;
}

.parent-ul li {
  width: 18%;
  display: inline-block;
  transition: background 1s, border 1s, border-radius 1s;
}

.parent-ul a {
  text-decoration: none;
  color: white;
  padding: 0;
  font-size: 14px;
  transition: all .3s linear;
  line-height: 38px;
}


/* Effects ================================ */

li:hover {
  background: black;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: all .3s linear;
}

li:hover a {
  color: gold;
  display: block;
  transition: all .3s linear;
  transform: scale(1.3, 1.3);
  -ms-transform: scale(1.3, 1.3);
  -webkit-transform: scale(1.3, 1.3);
}

当内容文本字体大小变大时，如何避免元素扩展？

4 个答案: