小编Val*_*hev的帖子

我已经建立了一个学校项目的网站,一切都很好,直到我看到按钮旁边的那些点/线.这是一张图片.

我的图像代码是:

CSS

 .button1 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 padding-top: 20px;
 }
 .button2 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .button3 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }

 .button4 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .button5 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 padding-top: 40px;
 }
 .button6 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .button7 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }

 .button8 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .button9 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 padding-top: 40px;
 }
 .button10 {
 overflow:hidden;
 left:50%;
 padding-right: 35px;
 }
 .button11{ …

我需要有 6 个相对位置的 div 作为可点击的按钮，其中 3 个向上，3 个向下，里面有特定的文本。问题是 - 当我写 2 或 3 个长单词（它们需要很长的宽度）时，一些按钮会向上或向下移动。我知道这是“display:inline-block”的问题。

超文本标记语言

<div class="Box_parent">
<a><div id="Box_button"> <div class="box_text">  TEST  </div> </div></a> 
<a><div id="Box_button"> <div class="box_text"> TEST   </div> </div></a> 
<a><div id="Box_button"> <div class="box_text">  REALLY REALLY REALLY LONG TEST </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text">  TEST  </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text">  REALLY REALLY REALLY LONG TEST  </div> </div> </a> 
<a><div id="Box_button"> <div class="box_text">  TEST  </div> </div> </a> 
</div>

CSS

#Box_button{
height:300px;
width:300px;
background-color:#4286f4;
margin:15px 15px;
display: …