Несколько элементов с одинаковой шириной, равной ширине элемента

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

Могу ли я предложить вам отказаться от использования таблиц ?

В конце концов, они все еще являются частью спецификации, и то, что вы делаете, может быть истолковано как табличные данные. Все, что вам нужно добавить, это 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 не делает что-то с дочерними элементами контейнера.

Answer 3

Как я понимаю, вы можете сделать это двумя способами:

1. Определите длину на стороне ASP и установите переменную с длиной большего, затем используйте ее в свойстве размера для каждого.
2. Напишите функцию javascript, чтобы выяснить, какой из них больше, и установите длину обоих.