Question

我想使span元素在固定位置上像这样

Mon  9-10pm  2300000  23%
T    9-10pm  23       23%

但是在尝试使用下面的html时，我得到了这个

Mon 9-10pm 2300000 23%
T 9-10pm 23 23%

我尝试使用css下的对齐方式来对齐每个跨度，但是当任何单词变小或变大时，它都会改变其他文本的位置。

position: relative;
left:15px;
top: 5px;

HTML

<div class="dataContainer">
  <span class="weekdays">
                      Mon
                      </span>
  <span class="time">
                      9-10pm
                      </span>
  <span class="subscriberCounts">
                      2300000
                      </span>
  <span class="border">
                      </span>
  <span class="subscriberPercentage">
                      23%
                      </span>
</div>
<div class="dataContainer">
  <span class="weekdays">
                      T
                      </span>
  <span class="time">
                      9-10pm
                      </span>
  <span class="subscriberCounts">
                      23
                      </span>
  <span class="border">
                      </span>
  <span class="subscriberPercentage">
                      23%
                      </span>
</div>

我可以添加哪些CSS来为每个span元素文本分配一些固定区域？

JSFIDDLE

Answer 1

赞。不知道边框是做什么的，因为它为空。我暂时在类上留下了红色边框，以便您可以看到跨度-只需根据需要调整大小即可将其删除。

.dataContainer
{
  float: left;
  clear: left;
}

.weekdays, .time, .subscriberCounts, .border, .subscriberPercentage
{
  display: block;
  float: left;
  border: 1px solid #ff0000;
}

.weekdays
{
  width: 50px;
}

.time
{
  width: 80px;
}

.subscriberCounts
{
  width: 100px;
}

.subscriberPercentage
{
  width: 50px;
}

<div class="dataContainer">
                  <span class="weekdays">
                  Mon
                  </span> 
                  <span class="time">
                  9-10pm
                  </span> 
                  <span class="subscriberCounts">
                  2300000
                  </span>
                  <span class="border">
                  </span>
                  <span class="subscriberPercentage">
                  23%
                  </span>
               </div>
               <div class="dataContainer">
                  <span class="weekdays">
                  T
                  </span> 
                  <span class="time">
                  9-10pm
                  </span> 
                  <span class="subscriberCounts">
                  23
                  </span>
                  <span class="border">
                  </span>
                  <span class="subscriberPercentage">
                  23%
                  </span>
               </div>

Answer 2

将此添加到CSS，它应该可以按照您想要的方式工作。：D

.weekdays{
  width: 20%;
  float: left;  
}

.time{
  width: 20%;
  float: left;
}

.subscriberCounts{
  width: 40%;
  float: left;
}

.border{
  width: 5%;
  float: left;
}

.subscriberPercentage{
  width: 15%;
  float: left;
}

Answer 3

我将使用一个表格-这是表格数据，并且表格将完全按照您想要的方式工作，而无需指定特定的宽度即可获得相等的列宽：

th {
  text-align: left;
}

th, td { padding:5px; }

<table class="dataContainer">
  <tr>
    <th class="weekdays" scope="row">
      Mon
    </th>
    <td class="time">
      9-10pm
    </td>
    <td class="subscriberCounts">
      2300000
    </td>
    <td class="border">
    </td>
    <td class="subscriberPercentage">
      23%
    </td>
  </tr>
  <tr>
    <th class="weekdays" scope="row">
      T
    </th>
    <td class="time">
      9-10pm
    </td>
    <td class="subscriberCounts">
      23
    </td>
    <td class="border">
    </td>
    <td class="subscriberPercentage">
      23%
    </td>
  </tr>
</table>

如果您真的想使用跨度，那么我将其设为内联块并为其指定宽度，这样您就无需浮动：

.dataContainer > span {
    display:inline-block;
}

.weekdays {
   font-weight:bold;
   width:3.5em;
}

.time {
   width:4em;
}

.subscriberCounts {
   width:4em;
}

<div class="dataContainer">
  <span class="weekdays">
                  Mon
                  </span>
  <span class="time">
                  9-10pm
                  </span>
  <span class="subscriberCounts">
                  2300000
                  </span>
  <span class="border">
                  </span>
  <span class="subscriberPercentage">
                  23%
                  </span>
</div>
<div class="dataContainer">
  <span class="weekdays">
                  T
                  </span>
  <span class="time">
                  9-10pm
                  </span>
  <span class="subscriberCounts">
                  23
                  </span>
  <span class="border">
                  </span>
  <span class="subscriberPercentage">
                  23%
                  </span>
</div>

Answer 4

您是否尝试过引导它？与列布局一样，这种方式也变得更加容易和响应。

谢谢！

如何为跨度文本分配固定区域

4 个答案: