css - HTML CSS 防止跨度容器间隙

Question

我做了这个小例子来说明我的问题。我有几个跨度容器，如果两个在一列中，则跨度容器比只有一个跨度容器的容器长一点:

My JS Fiddle Example

<span class="times">
    <span class="timeType cursorPointer">
        <span>D</span>
        </span>
        <span>
            09:00 - 12:00
        </span>     
    </span>
    <span class="times">
        <span class="timeType cursorPointer">
            <span>N</span>
            </span>
            <span>
                14:00 - 17:00
            </span> 
        </span>

有谁知道如何防止这种情况发生？所以这应该被阻止:

Answer 1

你可以设置一个 min-width 到 span，所以无论单个字符在 中，span 都将是相同的大小。

Inline-block 是允许大小调整所必需的。

.times {
  padding: 2px;
  margin-left: 2px;
  border: 1px solid #ddd;
  color: #000;
  background-color: #fff;
  display: inline-block;
}

span span {
  display: inline-block;
  min-width: 1em;
}

了解它来自使用的字符......

否则你可以使用另一个字体系列 ( W3C font-family: see monospace ) 而不会发生这种情况，例如 courier

注意 inline-block 的使用让每个框在流程中都表现为一个简单的片段/包装器。

.times {
  padding: 2px;
  margin-left: 2px;
  border: 1px solid #ddd;
  color: #000;
  background-color: #fff;
  display: inline-block;
  text-align: center;
}
.times {
  font-family: courier;
}

<table class="weekTable">
  <tr>
    <th></th>
    <tr>
      <td>
        <span>
						<span class="times">
							<span class="timeType cursorPointer" ng-dblclick="vm.ScheduleIntervalContainerPropertiesModal(userScheduleManagementWeeksContainer, scheduleIntervalContainers, scheduleIntervalContainer)">
								<span>D</span>
        </span>
        <span>
								09:00 - 12:00
							</span>
        </span>
        <span class="times">
							<span class="timeType cursorPointer" ng-dblclick="vm.ScheduleIntervalContainerPropertiesModal(userScheduleManagementWeeksContainer, scheduleIntervalContainers, scheduleIntervalContainer)">
								<span>N</span>
        </span>
        <span>
								14:00 - 17:00
							</span>
        </span>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span>
						<span class="times">
							<span class="timeType cursorPointer" ng-dblclick="vm.ScheduleIntervalContainerPropertiesModal(userScheduleManagementWeeksContainer, scheduleIntervalContainers, scheduleIntervalContainer)">
								<span>M</span>
        </span>
        <span>
								09:00 - 12:00
							</span>
        </span>
        </span>
      </td>
    </tr>
</table>

https://jsfiddle.net/q3jgytoq/4/