我的教授给了全班一张图片，可能与他可能要求我们在即将到来的考试中复制的图片相似。他的建议是回家看看我们是否可以制作一个克隆来学习。我已经记下了大部分内容，但他在顶部有这三个链接，它们完美地分布在整个页面上。
我玩数字游戏已经好几个小时了。我已经接近了，但它并没有完全复制图像。我曾尝试将链接的宽度设置为33%，边距设置为1.66%，但实际上我得到了一些意想不到的结果，浏览器将其中一个链接放在另一个链接的下面。如果是诚实的话，我只会更加困惑。他的形象对我来说是如此完美，它暗示了一些数学知识，而不仅仅是摆弄数字，直到它发挥作用。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="practiceTest.css">
<title>Document</title>
</head>
<body>
<div id="box1">
<a href="https://www.google.com" id="googLink">Google</a>
<a href="https://www.microsoft.com" id="microLink">Microsoft</a>
<a href="https://www.yahoo.com" id="yahooLink">Yahoo</a>
</div>
<hr>
<div id="box2">
<h1 id="header">Guest Book</h1>
<form action="post">
First Name:
<input type="text" id="fistName">
Last Name:
<input type="text" id="lastName">
College:
<input type="checkbox" name="Business" id="business">
Business
<input type="checkbox" name="Education" id="education">
Education
<input type="checkbox" name="arts" id="arts">
<br>
Current Profession:
<select>
<option value="idk">unemployed</option>
<option value="idk1">idk1</option>
</select>
<br>
Comments:
<br>
<textarea name="comments" id="comments" cols="30" rows="2"></textarea>
Would you like to share your comments with others?
<br>
<input type="radio" name="yes" id="yes">
<input type="radio" name="yes" id="yes">
<hr>
<button type="submit">Send</button>
<button type="reset">Clear</button>
</form>
</div>
<hr>
<div id="box3">
Copyright - Made up Name
</div>
</body>
</html>
CSS
#box1{
background-color: black;
align-self: center;
padding: 20px;
}
a{
align-content: center;
width: 20%;
margin:0 5.33%;
padding: 10px 0;
color: azure;
background-color: red;
display: inline-block;
text-decoration-line: none;
color: white;
text-align: center;
}
body{
background-color: whitesmoke;
}
#box2{
padding: 20px 20px;
margin: auto 10px;
background-color: white;
color: darkred;
}
#box3{
color: white;
background-color: black;
padding: 20px;
text-align: center;
}
如果从左/右两侧使用1.66%的裕度，则从宽度上减少该裕度，即33.33%-1.66%-1.66%。因此，在这种情况下，您的宽度应为30.01%。请确保使用float:left，因为display:inline-block会占用元素周围的额外空间。
如果您还想在a标记中添加一些填充，那么您还需要使用box-sizing:border-box使填充在元素宽度的范围内计数。
新建议：
作为替代方案，您也可以使用display:flex，并平均分配间距。你可以很容易地在谷歌上找到关于如何使用display:flex(或者说css flexbox布局模型(的资源。