Question

我有一条简单的警告信息：

HTML

<span id="j_idt68" class="aviso">
<a href="MEU LINK">message</a></span>

CSS

span.aviso a {
    padding:20px 35px;
    background: rgb(255, 174, 174);
    background: rgba(255, 174, 174, 0.3);
    border:1px solid #FF1C1C;                 
    border-radius:10px;
    color:#FF0000; 
    text-align: center;
    opacity:1;
    margin:0 auto;
    font-size:14px;
    display:block;
}

我宣称跨度的宽度为960px因为我希望消息居中但我不希望圆角矩形网站为960px，我希望根据文本的大小调整它的宽度

Answer 1

a元素不继承宽度;相反，您在其上设置display: block，使其宽度为整个可用宽度。您需要将设置分开，以便span对齐其中的文本行，a元素为inline-block（或默认为inline，但是您遇到行高问题）。像这样：

span.aviso { 
    display: block;
    width: 960px; 
    text-align: center;
}
span.aviso a {
    padding: 20px 35px;
    background: rgb(255, 174, 174);
    background: rgba(255, 174, 174, 0.3);
    border:1px solid #FF1C1C;                 
    border-radius:10px;
    color:#FF0000; 
    opacity:1;
    display: inline-block;
    font-size: 14px;
}

Answer 2

在锚点选择器上添加display:inline-block;。

http://jsfiddle.net/fZA8b/

如何制作<a> tag not inherit width from <span></span></a>

2 个答案: