我希望按钮的蓝色位全部长度相同

问题描述：

我希望按钮的蓝色位全部长度相同，因此它看起来很酷，而不是所有的杂乱我希望按钮的蓝色位全部长度相同

语境上下文语境

.button { 
 
    border: 0px solid #000000; 
 
    background: #70D4C7; 
 
    padding: 3.5px 7px; 
 
    -webkit-border-radius: 1px; 
 
    -moz-border-radius: 1px; 
 
    border-radius: 1px; 
 
    text-shadow: #70D4C7 0 1px 0; 
 
    font-size: 20.5px; 
 
    font-family: Fira Sans; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    color: #000000; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 
    <div id="button"> 
 
    <a href="#" style="color: black" class="button"><strong>Homepage</strong></a> 
 
    <br> 
 
    <br> 
 
    <a href="#" style="color: black" class="button"> <strong>exampleexample</strong> 
 
    </a> 
 
    <br> 
 
    <br> 
 
    <a href="#" style="color: black" class="button"><strong>example </strong></a> 
 
    </nav> 
 
    <p></p> 
 
    </div> 
 
</body> 
 

 
</html>

尝试添加'display：block'并移除'
'标签（如果您需要空间，请使用'margin-bottom'） –

您有一个孤立的''标签。另外，为什么你将链接设置为按钮？这通常被认为是糟糕的设计。按钮应该是按钮，链接应该是链接。 –

欲了解更多nitpicky的反馈信息：'border-radius'不再需要厂商前缀，'vertical-align'在这里什么都不做（你的'padding'处理就好了），你应该引用并提供字体的后备'font-family：“Fira Sans”，sans-serif;' –

答

你可以用在一个div每一个环节：

<div> 
    <a href="#" style="color: black" class="button"><strong>Homepage</strong></a> 
</div>

删除<br/>标签。并添加以下CSS（注意，我把背景颜色从你的CSS段在这里）：

#button > div { 
    margin: 10px; 
    width: 100%; 
    background: #70D4C7; 
} 

#button { 
    width: 40%; 
}

注：通常被认为是糟糕的编码风格来使用的比他们预期的其他用途元素。所以，例如，按钮应该用作按钮，链接应该用作链接。不应将链接设置为按钮样式。但是，如果你坚持当前的结构，上述修改将产生如下效果：

Here is a Fiddle Demo

答

<a>默认情况下display:inline，所以它不能有宽度。只需添加到类别button：

.button{ 
    width:200px; 
    display:block; 
}

并且您的问题已解决。

我希望按钮的蓝色位全部长度相同

相关推荐