Как я могу полностью удалить поле текстовых полей в HTML / css
У меня есть следующий HTML-код
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head runat = "server">
<title></title>
<style>
.box
{
border:solid black 1px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<form id = "form1" runat = "server">
<input class = "box" style = "width:300px;" /><br />
<input class = "box" style = "width:150px;" />
<input class = "box" style = "width:150px;" /><br />
<input class = "box" style = "width:100px;" />
<input class = "box" style = "width:100px;" />
<input class = "box" style = "width:100px;" />
</form>
</body>
</html>
Идея в том, что текстовые поля должны заканчиваться до пикселя с правой стороны.
В конечном итоге я добавлю интервалы в строки 2 и 3, увеличив ширину для компенсации, но на данный момент я хотел бы получить этот простой образец для рендеринга.
Итак, как я могу удалить поля этих текстовых полей, чтобы они правильно выровнялись?
Ответы 4
Вы говорите о правильном выравнивании всех текстовых полей?
Если да, то это не вопрос маржи. Это просто помещает текстовые поля в содержащий элемент. Возможно, а затем установите text-align: right; css в div.
Я обнаружил, что добавление float: left; в .box делает то, что вы хотели.
.box {
padding:0px;
margin:0px;
float: left;
}
Верно - я только что понял, что ответ Роборга (stackoverflow.com/questions/413573/…) более правильный, мой просто делает то же самое немного неправильно.
кстати, на хроме и в IE это выглядит совсем иначе.
Чтобы было понятнее, я задам отдельный вопрос о «странности общей ширины».
Они не выстраиваются в линию из-за пробелов между ними.
Если бы вы удалили все символы новой строки и табуляции между элементами <input>, он бы отображался так, как вы хотите.
Я забыл об этой досадной штуке. Удаление этого тоже сработает.
Работает так же, как ответ Росс, и не требует Float (что мне больше подходит), но все же страдает странной общей шириной? См. Комментарий под его ответом.
Чтобы было понятнее, я задам отдельный вопрос о «странности общей ширины».
Это меня несколько раз укусило. Всегда забывайте о пробелах. Спасибо!
Граница не входит в ширину, поэтому поле с границей 1 пиксель и шириной 150 пикселей фактически будет шириной 152 пикселя.
Это вроде работает. Однако, похоже, есть несоответствие в общей ширине. Мне нужно удалить 2 пикселя из первого текстового поля в строке 2 и первых 2 в 3-й строке, чтобы выровнять все ... Это кажется неправильным