代码之家 › 专栏 › 技术社区 › Patrick Hund

如何仅在后跟文本时在元素后添加边距

css html

Patrick Hund · 技术社区 · 6 年前

我对按钮中的图像进行了样式设置,以便在右侧留有空白,将图标与文本分开。

问题是,由于该边距,如果按钮中没有文本,图标不在按钮的中心,因此看起来很糟糕。

button {
  border: none;
  border-radius: 0.5rem;
  background-color: pink;
  line-height: 32px;
  font-size: 1rem;
  padding: 0.5rem;
}

button > img {
  float: left;
  margin-right: 0.5rem;
}

<div>
  <p>
    This looks OK:
  </p>
  <button>
    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png"> OK
  </button>
</div>
<div>
  <p>
    This doesn't (icon not in the center of the button):
  </p>
  <button>
    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">
  </button>
</div>

fiddle )

一个简单而明显的修复方法是将文本放在span元素中,然后使用 :only-child .

但是,我必须在我们的代码库中改变很多已经使用这种风格的地方,并且我必须以某种方式说服我的开发伙伴总是将他们的按钮标签放在span元素中,只是为了制作按钮没有文本标签看起来不错。

我已经试过了 :not 和 :empty 伪类选择器,但无法使其工作。问题在于无法选择纯文本节点或设置其样式。

1 回复 | 直到 6 年前

rejas 6 年前

我会和你一起去

然后,您可以去掉img标记altogther的样式

Bundyo 4 年前

https://bugs.chromium.org/p/chromium/issues/detail?id=1159311 . 幸运的是,有一个解决方案,但仅适用于支持CSS网格的较新浏览器。因此,新的组合解决方案应该是这样的:

button {
    border: none;
    border-radius: .5rem;
    background-color: pink;
    line-height: 32px;
    font-size: 1rem;
    padding: 5px 10px 5px 0;
    vertical-align: middle;
    display: inline-flex;
    text-indent: 10px;
}

button::-moz-focus-inner {
    border: 0;
}

button > img {
    margin-left: 10px;
}

@supports (display: grid) {
    button {
        text-indent: 0;
        padding: 5px 10px;
        display: inline-grid;
        grid-gap: 10px;
        grid-auto-flow: column;
    }

    button > img {
        margin-left: 0;
    }
}

<button>
    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">OK
</button>

<button>
    <img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png">
</button>

<button>
    OK
</button>

当然,您可以选择只支持较新的浏览器,在这种情况下,您可以将网格间距与按钮填充不同,从而实现更大的灵活性。

button {
    border: none;
    border-radius: .5rem;
    background-color: pink;
    line-height: 32px;
    font-size: 1rem;
    padding: 5px 10px 5px 0;
    vertical-align: middle;
    display: inline-flex;
    text-indent: 10px;
}

button::-moz-focus-inner {
    border: 0;
}

button > img {
    margin-left: 10px
}

<按钮>
<img src=”https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/star-32.png“>好啊

<按钮>
</按钮>

好啊