html - 具有相同宽度的多个元素等于最宽元素

Question

我有两个元素(一个按钮和一个 anchor 标记)，它们内部都有一个动态文本，该文本会增长到其内容的长度。
我不知道编译时哪一个最长，也不知道最大/最小宽度是多少。
较短的应始终适应最长的。

<span id="buttonsColumn">
    <button type="submit" name="powerSearchSubmitButton" id="powerSearchSubmitButton">
        <span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Search")%></em></span>
    </button>                    
    <a class="linkButton" href="something">
        <span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Advanced")%></em></span>
    </a>
</span>

包装 span 可以更改为任何所需的内容。
有什么想法吗？

Answer 1

你可以尝试这样的事情:

#buttonsColumn {
    display: block;
    float: left;
    background-color: #F88;
}
#buttonsColumn button,
#buttonsColumn a {
    display: block;
}
#buttonsColumn button {
    width: 100%;
    background-color: #8F8;
}
#buttonsColumn a {
    width: 100%;
    background-color: #88F;
}