代码之家 › 专栏 › 技术社区 › 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“>好啊

<按钮>
</按钮>

好啊

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

4 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前