Создание расширяемой кнопки в HTML
Мне нужно сделать кнопки «ОК» и «Отмена» в моем HTML-коде, и я бы хотел, чтобы они были фиксированной ширины, чтобы две кнопки были одинакового размера. Например, вот так:
<style>
button.ok_cancel {
width: 50px;
background-color: #4274af;
font-size: 9px;
line-height: 12px;
color: #fff;
cursor: pointer;
text-transform: uppercase;
padding: 1px;
border: 0px;
margin: 0 0 0 5px;
text-align: center;
letter-spacing: 1px;
}
</style>
<button class = "ok_cancel" onclick = "do_cancel()">Cancel</button>
Но сейчас я локализую текст, и перевод «Отмена» может оказаться слишком широким для кнопки. Я хочу, чтобы кнопка имела фиксированную ширину 50 пикселей, если строка подходит, но расширялась по ширине, если строка шире. Будет использоваться фиксированное количество боковых отступов, чтобы кнопка выглядела хорошо.
Я знаю, что, вероятно, не смогу сделать это с помощью чистого CSS, но какой самый простой HTML-код, который я могу использовать, даст мне желаемый эффект?
Ответы 2
Не уверен, но:
button { min-width: 50px; width: auto; }
LMK, если это работает, он должен работать, пока он не плавает.
Обычно вы можете установить ширину * для IE и overflow: auto или display, и IE будет правильно расширяться.
Я работал с двухдневным ответом и в итоге получил следующее:
/* Browser hack! This is for everyone: */
button {
display: inline;
cursor: pointer;
padding: 6px 6px;
width: 50px;
overflow: visible;
}
/* and this is for non-IE browsers: */
html>body button {
min-width: 50px;
width: auto;
}
IE хочет, чтобы указанная ширина и переполнение были видимыми, другие браузеры хотят, чтобы минимальная ширина и ширина были автоматически. CSS-хак позволяет IE видеть один набор свойств, а другому браузеру - другой набор.
Хорошо, для нас, неофитов: почему IE игнорирует селектор «html> body button» (выбирает все элементы кнопки, содержащиеся в элементе body, прямым родителем которого является элемент html)? И этот хак работает на всех версиях IE?
В Firefox это выглядит хорошо, но IE6 игнорирует свойство min-width.