Question

我想将图标和文字垂直居中放置在彼此旁边。图标是精灵，所以我不能使用居中的背景图像，因为需要剪辑它。

当我使用图标所具有的相同saze的右边距填充文本内容时，它可以工作，但是对我来说似乎是一个错误，它无法正确计算宽度。

HTML：

<tr>
    <td class="col0">
        <a href="javascript:alert('click')">
            <span class="icon"></span><span class="text">a name that is so long that it needs multiple lines to be displayed, lorem ipsum dolor sit amet, blablablabla, sdfsfsdfgsdfgsdfsafd</span>
        </a>
    </td>
    <td class="col1">some value</td>
</tr>

CSS：

.col0 span {
    vertical-align: middle;
    display: inline-block;
}
.col0 .icon {
    width: 24px;
    height: 24px;
    background-image: url(https://i.imgur.com/tyte2jp.png);
    background-position: -229px -39px;
    margin-right: 4px;
}
.col0 .text {
    white-space: normal;
    text-decoration: inherit;
    /*margin-right: 24px;*/
}

whole example on codepen

刚刚意识到我们可以通过图标上的负边距来破解这个，并摆脱丑陋的现象。但是我想知道为什么当nowrap打开时块不能正确计算它们的宽度。

Answer 1

您未定义宽度，因此所有<span>将占用宽度的100％。如果您的图标宽度为24px，则可以执行以下操作：

 .col0 span.text {
      width: calc(100% - 24px);
 }

这使得计算TD的100％然后减去图标宽度的24个像素。看它工作：

http://codepen.io/anon/pen/LpOKvd

请参阅calc()功能的兼容性：

http://caniuse.com/#feat=calc

Answer 2

似乎有点滥用white-space属性。我不会对你遇到困难感到惊讶。也许最好避免它并将icon置于a之内？

http://codepen.io/moob/pen/pjdMLw

＆＃13;

td {
  border: solid 1px;
}
.col0 {
  width: 20em;
  position:relative;
}
.col0 a {
  display:block;
  vertical-align: middle;
  text-decoration: inherit;
  margin-left: 32px;
}
.col0 .icon {
  display:block;
  position:absolute;
  top:0;
  left:4px;
  bottom:0;
  width: 24px;
  height: 24px;
  margin:auto;
  background-image: url(https://i.imgur.com/tyte2jp.png);
  background-position: -229px -39px;
}
.col1 {
  width: 5em;
}

＆＃13;

<table>
  <tr>
    <td class="col0">
      <a href="javascript:alert('click')">
        <span class="icon"></span>a name that is so long that it needs multiple lines to be displayed, lorem ipsum dolor sit amet, blablablabla, sdfsfsdfgsdfgsdfsafd
      </a>
    </td>
    <td class="col1">
      some value
    </td>
  </tr>
</table>

＆＃13;

Answer 3

我想知道为什么这些块不能正确计算它们的宽度

宽度根据规格计算。对于inline-block, non-replaced elements in normal flow，使用shrink-to-fit算法计算width: auto：

收缩 - 拟合宽度的计算类似于计算   使用自动表格布局算法的表格单元格的宽度。   大致是：


通过格式化内容来计算首选宽度，而不会破坏显式换行符以外的行

还计算首选的最小宽度，例如，尝试所有可能的换行符。 CSS 2.1没有定义精确的算法。

找到可用的宽度：在这种情况下，这是包含块的宽度减去＆＃39; margin-left＆＃39;的使用值，   ＆＃39; border-left-width＆＃39;，＆＃39; padding-left＆＃39;，＆＃39; padding-right＆＃39;，   ＆＃39; border-right-width＆＃39;，＆＃39; margin-right＆＃39;，以及任何相关的宽度   滚动条。

然后收缩配合宽度为：min（max（首选最小宽度，   可用宽度），首选宽度）。

因此，可用宽度仅考虑包含块的内容宽度，而不减去其他元素的宽度。

如果您不必支持旧浏览器，我建议改用flexbox：

.col0 > a {
  display: flex; /* Single-line row magical layout */
  align-items: center; /* Center items vertically */
}
.col0 .icon {
  flex-shrink: 0; /* Do not shrink this item in case there isn't enough space */
}

＆＃13;

td {
  border: solid 1px;
}
.col0 {
  width: 20em;
}
.col1 {
  width: 5em;
}
.col0 > a {
  display: flex;
  align-items: center;
}
.col0 .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-image: url(https://i.imgur.com/tyte2jp.png);
  background-position: -229px -39px;
  margin-right: 4px;
}

＆＃13;

<table>
  <tr>
    <td class="col0">
      <a href="javascript:alert('click')">
        <span class="icon"></span>
        <span class="text">a name that is so long that it needs multiple lines to be displayed, lorem ipsum dolor sit amet, blablablabla, sdfsfsdfgsdfgsdfsafd</span>
      </a>
    </td>
    <td class="col1">some value</td>
  </tr>
</table>

＆＃13;

CSS nowrap＆amp;包裹组合误算儿童宽度

3 个答案: