Входные метки фиксированной ширины
Я хотел бы, чтобы метки для входов были одинаковой ширины, чтобы входы и метки были похожи на таблицу.
Вроде как два столбца: 1 для меток и 1 для входов
Код до сих пор:
th, td, table{border: 2px solid black;
border-collapse: collapse;
}
th, td{width: 100px}
table{width: 100%;
text-align: center;}
body{font-family: "Bradley's Hand", cursive;}
.label{display: inline-block;
width: 100px}
input{width: 200px;}<body>
<h1>Add Transactions</h1>
<fieldset>
<legend>Use This Form To Add Transactions</legend>
<form action = "add.php" method = "post">
<label class = "label" for = "date">Transaction Date: </label>
<input type = "date" name = "date" required>
<br>
<br>
<label class = "label" for = "amount">Transaction Amount: </label>
<input type = "number" name = "amount" required>
<br>
<br>
<label class = "label" for = "merchant">Merchant: </label>
<select name = "merchant" required>
<option value = "" disable selected>Select One</option>
<option value = "other">Other</option>
</select>
<br>
<br>
<label class = "label" for = "om">Other Merchant: </label>
<input type = "text" name = "om">
<br><br>
<label for = "type" class = "label">Transaction Type: </label>
<select name = "type" required>
<option value = "" disable selected>Select One</option>
<option value = "other">Other</option>
</select>
<br>
<br>
<label for = "ot" class = "label">Other Transaction Type: </label>
<input type = "text" name = "ot">
<br><br>
<label for = "source" class = "label">Source: </label>
<select name = "source" required>
<option value = "" disable selected>Select One</option>
<option value = "other">Other</option>
</select>
<br>
<br>
<label for = "os" class = "label">Other Source: </label>
<input type = "text" name = "os">
<br>
<br>
<input type = "reset">
<input type = "submit" value = "Save Transaction">
</form>
</fieldset>
</body>
</htm>Спасибо!
P.S. Я могу дать более подробную информацию, если я не достаточно ясно!
П.П.С. Что я имею в виду
как стол
похож на структуру. Не как настоящий стол с <table>
Кроме того, возможно, предоставьте некоторый контекст о том, почему вы не хотите использовать таблицу и каковы требования. В противном случае никто не может быть уверен, что предложит вам хорошее решение.
@Kielstra, потому что использование таблицы в качестве инструмента макета является неправильным использованием. Начиная с CSS3 у вас есть полная поддержка браузером CSS-Grid (за исключением IE) и Flex-боксов, которые могут делать то же самое намного чище и с меньшим количеством HTML-кодирования. Его можно полностью стилизовать с помощью CSS, что также позволяет переупорядочивать для полного отклика в сочетании с медиа-запросами. Например, переключение макета с несколькими столбцами на макет гамбургера при использовании на мобильных устройствах.
@tacoshy Это очень веские причины. Я еще не думал об этом таким образом.
Одно добавление: SO - это не форум, где вы просите закрыть вопрос. Вопрос будет закрыт только в том случае, если он не соответствует руководящим принципам SO и либо закрыт голосованием, либо кем-то с определенным значком SO. Вопросы, соответствующие рекомендациям SO, также останутся открытыми для использования другими пользователями.
@tacoshy Ну, я не хотел удалять вопрос, но не хотел, чтобы он был активным, чтобы люди знали, что мне больше не нужна помощь!
вы сделали это, отметив ответ;)
Ответы 1
Самый простой способ решить эту проблему: CSS-Grid. Позволит обеспечить полную отзывчивость и создать таблицу, подобную макету. чтобы оставить кнопки внизу, как они есть, я завернул их в дополнительный div.
body {
font-family: "Bradley's Hand", cursive;
}
form {
display: grid;
grid-template-columns: min-content auto;
grid-row-gap: 2em;
white-space: nowrap;
}
.last-row {
grid-column: span 2;
}
.last-row input {
width: 200px;
}<body>
<h1>Add Transactions</h1>
<fieldset>
<legend>Use This Form To Add Transactions</legend>
<form action = "add.php" method = "post">
<label class = "label" for = "date">
Transaction Date:
</label>
<input type = "date" name = "date" required>
<label class = "label" for = "amount">
Transaction Amount:
</label>
<input type = "number" name = "amount" required>
<label class = "label" for = "merchant">
Merchant:
</label>
<select name = "merchant" required>
<option value = "" disable selected>
Select One
</option>
<option value = "other">
Other
</option>
</select>
<label class = "label" for = "om">
Other Merchant:
</label>
<input type = "text" name = "om">
<label for = "type" class = "label">
Transaction Type:
</label>
<select name = "type" required>
<option value = "" disable selected>
Select One
</option>
<option value = "other">
Other
</option>
</select>
<label for = "ot" class = "label">
Other Transaction Type:
</label>
<input type = "text" name = "ot">
<label for = "source" class = "label">Source: </label>
<select name = "source" required>
<option value = "" disable selected>
Select One
</option>
<option value = "other">
Other
</option>
</select>
<label for = "os" class = "label">Other Source: </label>
<input type = "text" name = "os">
<div class = "last-row">
<input type = "reset">
<input type = "submit" value = "Save Transaction">
</div>
</form>
</fieldset>
</body>
</htm>Спасибо! Это сработало! Нужны ли нам входные данные, чтобы они были очень длинными? Я разберусь!
Нет, конечно нет. вы можете указать ширину столько, сколько хотите, с помощью grid-template-columns: column-1 column-2; в настоящее время для первого столбца установлено значение min-content, которое будет использовать столько места, сколько необходимо, а для второго столбца — auto, которое заполнит все оставшееся пространство родителя.
Спасибо! Так много!
Как насчет гибкости CSS или сетки?