Question

我想在中心对齐4个文本标签，边距为5px。

守则：

.header_section span {
  width: 100%;
}
.header_section min {
  padding-left: 30%;
  padding-right: 5%;
}
.header_section consume {
  padding-right: 5%;
}

<div class="header_section">
  <span class="min">Min</span>
  <span class="consume">Consumption</span>
  <span class="avg">Average</span>
  <span class="max">Max</span>		
</div>

我是否需要添加ID而不是类？我是否需要使用label代码而不是span代码？

Answer 1

以下样式可以做到这一点。除了第一个以外，它为所有跨度添加了5px的左边距。

.header_section{
  text-align:center;
}
.header_section span + span {
  margin-left:5px;
}

此fiddle

中有一点改进版本

Answer 2

 <style>
 .header_section{
text-align:center;
 }
.header_section span {
   width: 100%;
  }
.header_section min {
padding-left: 30%;
padding-right: 5%;
}
.header_section consume {
padding-right: 5%;
}
 </style>

Answer 3

我是否需要添加ID而不是类？

没有

我是否需要使用label标签而不是span标签？

没有。标签用于与表单中的输入相关联的文本。也许是一个列表，取决于semactic意义。

＆＃13;

.header_section{
  text-align:center;
}

.header_section li{
  display:inline-block;
  margin-right:5px;
}

＆＃13;

<ul class="header_section">
  <li>Min</li>
  <li>Consumption</li>
  <li>Average</li>
  <li>Max</li>		
</ul>

＆＃13;

在中心对齐标签

3 个答案: