Question

我有一个600px宽和30px高的div容器，它包含7个“day tab”div和2个较小的“arrow”div。我可以让箭头和标签在“days_panel”div中居中，但是当你缩放时，会创建一个毯子空间。有没有人知道保持标签居中和水平对齐的好方法？

感谢您的帮助！

编辑：添加了代码！遗憾！

这是HTML

      <div class ="container">
         <div class ="center">
            <div class="days_panel">
               <div class="left_day_arrow"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="day"></div>
               <div class="right_day_arrow"></div>
            </div>
         </div>
      </div>

CSS：

/* -----------------MAIN CONTAINER ----------------------*/
.container{
position: relative;
top: 5px;
margin-left: auto;
margin-right: auto;
width: 1024px;
height :1000px;
}

/* ---------------- CENTER PANEL ---------------- */
.center{
float:left;
margin-left:5px;
width:600px;
height: 100%;
background-color:#C6AEC7;
}

.days_panel{
width:100%;
height:30px;
background-color: white;
}

.day{
float:left;
position:relative;
margin-left: 6px;
width: 11%;
height:100%;
background-color:black;
}

.left_day_arrow{
float:left;
position:relative;
width:5%;
height:100%;
background-color: springgreen;
}

.right_day_arrow{
float:right;
position:relative;
width:5%;
height:100%;
background-color: springgreen;
}

Answer 1

为什么要使用百分比？您可以使用像素轻松设置每个项目的宽度。

如果我仔细观察，则day元素的宽度为11％。 11％x 7 = 77％现在箭头是5％。 5％x 2 = 10％。总计87％。因此，在它之间获得开放空间是合乎逻辑的。

如果我有这些元素，我会将日宽设置为80px，箭头设置为20px。这样它就等于600像素。

希望这有帮助。

如何保持水平对齐标签的宽度与浏览器缩放一致？

1 个答案: