Question

我有两个元素（一个按钮和一个锚标记），里面都有一个动态文本，长大到内容的长度。
我不知道它们中哪一个在编译时最长，也不知道最大/最小宽度是多少。
较短的一个应该始终适应最长的一个。

<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;
}

Answer 2

在我看来，你可以用两种方式做到：

计算出ASP端的长度，并设置一个变量，其长度较大，然后在每个变量的size属性中使用它。
编写一个javascript函数来确定哪两个更大，并将两者的长度设置为。

Answer 3

我建议你give up and use tables吗？

毕竟它们仍然是规范的一部分，你所做的事情可以被解释为表格数据。您需要为每个表格数据标记添加style="width:50%"，为该按钮添加style="width:100%"标记。

<table>
<tr>
    <td style="width:50%">
    <button type="submit" style="width:100%" name="powerSearchSubmitButton" id="powerSearchSubmitButton">
        <span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Search")%></em></span>
    </button>
    </td>
    <td style="width:50%">
    <a class="linkButton" href="something">
        <span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Advanced")%></em></span>
    </a>
    </td>
</tr>
</table>

你可以删除按钮和锚标签中的那些跨度，它们似乎没有用处，除非你的CSS正在对容器的span子进行某些操作。

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

3 个答案: