HTML CSS可以防止跨度容器的差距

Question

我做了一个显示我问题的小例子。我有一些span容器，如果两个在一个列中，那么span容器比只有一个span容器的容器长一点：

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/

Answer 2

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

用这个替换你的CSS，它应该工作:)

如果你的宽度相同，则必须确定.times的宽度：

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

替换它：）

Answer 3

您可以解决为span和display:inline-block

添加固定宽度的问题

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

        }

https://jsfiddle.net/q3jgytoq/2/