1

我有这个 CSS 代码：

 .tab-box {
    border-bottom: 1px solid #666666;
    padding-bottom:5px;
 }

.tab-box a {
  border:1px solid #666666;
  color:#FFFFFF;
  padding: 0 5px 0 5px;
  text-decoration:none;
  background-color: #eee;
  background:#666666;
  color:#FFFFFF;
 }

.tab-box a.activeLink { 
  background-color: #eeeeee;
  color:#666666;
  border-bottom: 0; 
  padding: 5px 15px;
 }

.tabcontent {
    padding: 5px;
    width: 99%;
 }

.hide { display: none;}

.small { 
    color: #999; 
    margin-top: 100px; 
    border: 1px solid #EEE; 
    padding: 5px; 
    font-size: 9px; 
    font-family:Calibri; 
}

我正在尝试为链接添加边距顶部。

我已经尝试添加margin-top:30px;，.tab-box a但它没有添加它。

我需要它，所以如果标签完全大于屏幕宽度，当它们彼此下方时，它们不会重叠。

这是一个完整的代码http://jsfiddle.net/5rZP8/

4

5 回答 5

3

您将它应用于a作为.tabLink.

相反，将其应用于a包含 class 的元素.tabLink。

a.tabLink {
    margin-top: 30px;
}

jsFiddle 示例- 它有效。

此外，您还需要添加display:inline-block才能使边距生效。

于 2013-11-01T20:39:48.527 回答
1

a默认情况下，元素显示为内联。所以为了让margin生效需要这个。

通过这种方式，浏览器将向锚点应用边距和填充属性。

http://jsfiddle.net/5rZP8/6/

我更新了它，所以你可以看到它工作。

.tabLink {
    margin-top:30px;
    display:inline-block;
}
于 2013-11-01T20:44:48.280 回答
0

请参阅此问题的已接受答案：display:inline with margin, padding, width, height。链接a是内联 HTML 元素，默认情况下会在 CSS 中显示display: inline。不同的display属性值会以不同的方式呈现。

摘抄：

有关完整说明，请参阅 CSS 规范中的“内联格式上下文”。

于 2013-11-01T20:38:45.623 回答
0

内联元素不能很好地处理边距。添加display: inline-block;似乎有效：

.tab-box a {
  border:1px solid #666666;
  color:#FFFFFF;
  padding: 0 5px 0 5px;
  text-decoration:none;
  background-color: #eee;
  background:#666666;
  color:#FFFFFF;

  display: inline-block;
  margin-top: 30px;
}

见小提琴：http: //jsfiddle.net/5rZP8/2/

于 2013-11-01T20:39:42.213 回答
0

链接必须是块元素才能使您的代码正常工作。使用它来使它们成为块级元素，同时仍然保留它们的其他样式： 

.tab-box a { display: inline-block': }

一旦链接成为块元素，div 将扩展以填充它们。所以现在你可以简单地添加：

.tab-box { margin-top: 30px; }
于 2013-11-01T20:42:58.997 回答