<input type='text'> с display:table-cell и width:100%

den_alex_96 · January 16, 2017

Доброго времени суток.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
		<style>
		.table
		{
		display:table;
		width:100%;
		}
		.table-cell
		{
		display:table-cell;
		border:solid 1px black;
		}
		.aaa
		{
		width:100%;
		}
		
		</style>
    </head>
    <body>
 <div>
<form class='table'>
<div class='table-cell'>текст</div>
<input type='text' class='table-cell aaa' maxlength='50'>
<input type='submit' value='отправить' class='table-cell'>
</form>
 </div>
    </body>
</html>

Почему текстовое поле занимает всю место справа в строке, и не остается места для кнопки?

Если поменять текстовое поле на div, то всё нормально, div занимает всё доступное пространство, учитываю остальные ячейки в строке, как и должно быть для таблиц

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
		<style>
		.table
		{
		display:table;
		width:100%;
		}
		.table-cell
		{
		display:table-cell;
		border:solid 1px black;
		}
		.aaa
		{
		width:100%;
		background:red;
		}
		
		</style>
    </head>
    <body>
 <div>
<form class='table'>
<div class='table-cell'>текст</div>
<div class='table-cell aaa'>текст 1</div>
<input type='submit' value='отправить' class='table-cell'>
</form>
 </div>
    </body>
</html>

А почему не работает для <input>?

VeniVidiVici · January 17, 2017

table-cell с элементами формы

Насколько я понял, ещё не до конца было продумано как table-cell будет работать с элементами формы. Можете даже посмотреть в консоли, во вкладке computed значение свойства display у инпута не меняется на table-cell.

Рекомендуют оборачивать инпут в див и уже к нему применять table-cell.

Sign In

<input type='text'> с display:table-cell и width:100%

Question

den_alex_96

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

VeniVidiVici

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information