Question

我在设计网站顶部栏时遇到一些问题。我希望所有锚标签在整个屏幕上均分。有四个锚定标记，因此我认为，通过将每个标记的宽度设置为25％，它们将分别占据块的四分之一。从理论上讲，它们应该全部排成一排，但最后一排要向下移动。我不知道是什么原因导致了这种情况的发生，希望我能得到一些帮助。谢谢！

html代码：

document.querySelectorAll('.dice').forEach( dice_Item=>dice_Item.style.display = 'none' );

CSS代码：

<div class="navbar">
<a href="index.php">Home</a>
<a href="lessons.php">Lessons</a>
<a href="contact.php">Contact</a>
<a href="login.php">Login</a>
</div>

Answer 1

是.navbar a中定义的填充导致偏移。您可以在规则中添加box-sizing: border-box来避免这种效果（内容将缩小，而不是容器扩展以适合填充）。或者，我认为最好使用flexbox：

.navbar {
  background-color: #555;
  overflow: auto;
  display: flex
}

.navbar a {
  flex: 1;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  text-align: center; /* If you want the text to be centered */
}

display: flex将在导航栏容器上初始化flexbox，而锚点中的flex: 1将告诉浏览器为所有元素赋予相等的宽度。

一个简单的小提琴来解释（案例1和2可以用box-sizing轻松解决）：

.container {
  width: 200px;
  border: 1px solid #000;
 }
 
 .item-no-flex {
   width: 25%;
   padding: 3px;
   border: 1px dashed #000;
   float: left;   
 }
 
 .item-ib {
   width: 25%;
   padding: 3px;
   border: 1px dashed #000;
   display: inline-block
 }
 
 .container-flex {
   width: 200px;
   display: flex;
   border: 1px solid #000
 }
 
 .item-flex {
   width: 25%;
   padding: 3px;
   flex: 1;
   border: 1px dashed #000;
 }

<p>Float</p>
<div class="container">
  <div class="item-no-flex">1</div>
  <div class="item-no-flex">2</div>
  <div class="item-no-flex">3</div>
  <div class="item-no-flex">4</div>
</div>

<p style="clear:both">Inline-block</p>
<div class="container">
  <div class="item-ib">1</div>
  <div class="item-ib">2</div>
  <div class="item-ib">3</div>
  <div class="item-ib">4</div>
</div>

<p style="clear:both">Flexbox</p>
<div class="container-flex">
  <div class="item-flex">1</div>
  <div class="item-flex">2</div>
  <div class="item-flex">3</div>
  <div class="item-flex">4</div>
</div>

Answer 2

尝试简化代码并使用flexbox。

HTML：

<div class="navbar">
  <a href="index.php">Home</a>
  <a href="lessons.php">Lessons</a>
  <a href="contact.php">Contact</a>
  <a href="login.php">Login</a>
</div>

CSS：

.navbar {
  display: flex;
  justify-content: space-around;
}

这应该将链接均匀地分布在页面上，并且每个链接周围都有空格，而不管屏幕宽度如何。

锚标签宽度问题

2 个答案: