时间戳

首页 > 解决方案 > 如何为不均匀的内容框创建均匀的边框？

html - 如何为不均匀的内容框创建均匀的边框？

问题描述

我已经完成了学习 HTML 和 CSS 课程的一半，这是我第一次尝试编程，所以请原谅我遇到的（可能）简单的问题。

我正在为一个虚构的网站创建导航选项卡，这些选项卡是“菜单”、“营养”、“订单”和“位置”。如您所见，每个选项卡的大小都会不同，因为内容会有所不同。我正在尝试为每个选项卡制作一个边框，以便每个选项卡的边框具有相同的高度和宽度，有效地排列为四个全等的矩形，其中包含单词。我正在使用的这部分的 HTML 代码是：

<nav>
   <span><a href="#">MENU</a></span>
   <span><a href="#">NUTRITION</a></span>
   <span><a href="#">ORDER</a></span>
   <span><a href="#">LOCATIONS</a></span>
</nav>

我目前对 CSS 有影响的代码是：

* {
  box-sizing: border-box;
}

,

nav span {
  display: block;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 13px 0px;
}

和

nav a {
  color: #666666;
  border: 1px solid rgb(202, 202, 202);
  padding: 1px;
  margin: 0px 3px;
}

这是由此产生的视觉效果

我将如何使每个选项卡的边框一致且彼此一致？

标签： htmlcss

解决方案

* {
  box-sizing: border-box;
}

nav span {
  display: block;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 13px 0px;
  text-align: center;
}

nav a {
  color: #666666;
  border: 1px solid rgb(202, 202, 202);
  padding: 1px;
  margin: 0px 3px;
  text-decoration: none; 
  display: inline-block;  
}

https://codepen.io/stargroup0075/pen/MWwLxMd

推荐阅读