Question

我遇到了一个关于网络开发的特定方面的问题，我正在做的关于css样式的问题。

我所拥有的是以下HTML：

<div id = "spaninsidea">
 <ul id="spantest">
    <li><a id="nav-button-one"  href="javascript:return false;"><span>Link 1</span></a></li>
    <li><a id="nav-button-two"  href="javascript:return false;"><span>Link 2</span></a></li>
</div>

使用以下CSS设置样式：

#spaninsidea { background: #494949; padding: 5px 5px 5px 37px; overflow: hidden; margin: 0 0 10px 0; }
#spaninsidea li { display: inline;}
#spaninsidea li a { text-transform:uppercase; text-align:center; border-radius:5px; 
display: block; margin-right:50px; width: 100px; height: 100px; background-color: green;
float: left; }
#spaninsidea li a span {background-color:orange; margin-top:50px}

我想要获得的是链接中的spa文本位于标记的中间。当我尝试在跨度上应用边距设置时它只是静止不动，但是如果我改变字体颜色等它会播放板球。我不知道为什么它的风格但不会让步。

我会承认前端的东西对我来说是新的，所以如果你能看到任何明显的问题，请指出它们。

干杯

Answer 1

通常，您不应在span内拥有a。这将是第一部分...我建议尝试将text-align:center;应用于span。

更新：在此处查看有效版本：http://jsfiddle.net/2eLer/您只需将line-height的{{1}}设置为等于或大于span。

Answer 2

重要的是要记住，跨距是内联元素而不是块元素，因此，不要像你认为的那样响应边距和填充。

有一个名为“inline-block”的css显示属性允许元素像跨距和其他内联元素一样浮动，但也使它们在边距和填充方面表现得像div。

Answer 3

您根本不应使用<span>，而是更改链接本身的padding属性。

Span标签里面的锚标签造型问题

3 个答案: