Question

这是我的css和html代码

.navi ul li {
  float:left;
  list-style-type: none;
  border-right: 1px solid #c0c0c0;
  margin:0px 0 0 0;
}

.navi ul li:last-child {
  border:none;
}

.navi ul li a {
  display:block;
  margin:0 20px;
  text-decoration: none;
  color:black;
}

#info {
  display:block;
  margin:0px 20px 0px;
  text-decoration: none;
  font-size:80%;
  color:gray;
}

<div class="navi">
  <ul>
    <li><a href="#">MANUALS</a></li>
    <li><a href="#">NEWS</a></li>
    <li><a href="">SPARE PART</a></li>
    <li><a href="">WHERE TO BUY</a></li>
    <li><a href="#">SUPPORT</a></li>
    <li><a href="#">EDIT BOOK</a></li>
    <li><span id="info">Hi, Guest</span></li>
    <li><a href="#" id="login">LOG IN</a></li>
  </ul>
</div>

我需要调整li项目的字体大小，但我发现边框也会更改为我只是调整字体的大小。

当我尝试调整字体大小时，如何保持“Hi，Guest”的右边框与其他边框相同？

Answer 1

从display:block移除#info，如下所示

#info {     
  margin:0px 20px 0px;
  text-decoration: none;
  font-size:80%;
  color:gray;
}

<强>段

＆＃13;

.navi ul li {
  float:left;
  list-style-type: none;
  border-right: 1px solid #c0c0c0;
  margin:0px 0 0 0;
}

.navi ul li:last-child {
  border:none;
}

.navi ul li a {
  display:block;
  margin:0 20px;
  text-decoration: none;
  color:black;
}

#info {
 
  margin:0px 20px 0px;
  text-decoration: none;
  font-size:80%;
  color:gray;
}

＆＃13;

<div class="navi">
  <ul>
    <li><a href="#">MANUALS</a></li>
    <li><a href="#">NEWS</a></li>
    <li><a href="">SPARE PART</a></li>
    <li><a href="">WHERE TO BUY</a></li>
    <li><a href="#">SUPPORT</a></li>
    <li><a href="#">EDIT BOOK</a></li>
    <li><span id="info">Hi, Guest</span></li>
    <li><a href="#" id="login">LOG IN</a></li>
  </ul>
</div>

＆＃13;

Answer 2

为列表项

设置line-height: 20px

.navi ul li {
  float: left;
  list-style-type: none;
  border-right: 1px solid #c0c0c0;
  margin: 0px 0 0 0;
  line-height: 20px; // Add
}
.navi ul li:last-child {
  border: none;
}
.navi ul li a {
  display: block;
  margin: 0 20px;
  text-decoration: none;
  color: black;
}
#info {
  display: block;
  margin: 0px 20px 0px;
  text-decoration: none;
  font-size: 80%;
  color: gray;
}

<div class="navi">
  <ul>
    <li><a href="#">MANUALS</a>
    </li>
    <li><a href="#">NEWS</a>
    </li>
    <li><a href="">SPARE PART</a>
    </li>
    <li><a href="">WHERE TO BUY</a>
    </li>
    <li><a href="#">SUPPORT</a>
    </li>
    <li><a href="#">EDIT BOOK</a>
    </li>
    <li><span id="info">Hi, Guest</span>
    </li>
    <li><a href="#" id="login">LOG IN</a>
    </li>
  </ul>
</div>

Answer 3

对于像这样的事情总是发布一个小提琴。

如果你的意思是元素随字体大小扩展，那就是html / css的默认行为。

您可以设置元素的固定高度或使文本位置：绝对，以便不扩展其父项大小

调整字体大小时如何保持不变？

3 个答案: