Question

我有一些像这样的html（自动生成）：

<a>Save</a> &nbsp; <a>Cancel</a> &nbsp;

这两个按钮是通过框架自动生成的，所以我几乎无法控制这两个链接之间的空间。我想在两个按钮之间包含更多空间。我添加了一些CSS

.fw-link {
margin-left: 6px!important;
margin-right: 6px!important;
}

但是这又为“取消”和“保存左侧”链接添加了边距 - 浪费了很多空间。是否可以根据LINK的文本值编写一些适用的CSS？

Answer 1

使用类似的东西：

a:nth-child(1) { //1st a
    margin-right: 6px //!important needed?
}

a:nth-child(2) { //2nd a
    margin-left: 6px //!important needed?
}

Answer 2

尝试使用属性名称。

<a name="save">Save</a> nbsp; <a name="cancel">Cancel</a> nbsp;

然后在你的CSS文件中：

a[name=save] {
margin-right: 6px!important;
}
a[name=cancel] {
margin-left: 6px!important;
}

Answer 3

您的CSS可以是：

a {
   margin-left: 6px!important;
   margin-right: 6px!important;
}
a:first-child {
   margin-left: 0 !important;
} 
a:last-child {
   margin-right: 0 !important;
}

这将做的是：
1.在所有链接之间添加空格
2.从第一个链接中删除左边距
3.从上一个链接中删除右边距

Sample codepen link

CSS基于链接的文本值

3 个答案: