Как я могу полностью удалить поля текстовых полей в HTML / CSS - PullRequest
Новая
       42

Как я могу полностью удалить поля текстовых полей в HTML / CSS

2 голосов
/ 05 января 2009

У меня есть следующий 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 ]

6 голосов
/ 05 января 2009

Они не выстраиваются в очередь из-за пробелов между ними.

Если бы вы удалили все новые строки и вкладки между элементами <input>, они бы отображались так, как вы хотите.

2 голосов
/ 05 января 2009

Я обнаружил, что добавление float: left; в .box сделало то, что вы хотели. 

.box {
    padding:0px;
    margin:0px;
    float: left;
}
0 голосов
/ 31 мая 2011

Граница не входит в ширину, поэтому поле с рамкой 1px и шириной 150px будет иметь ширину 152 px.

0 голосов
/ 05 января 2009

Вы говорите о правильном обосновании всех текстовых полей?

Если это так, это не вопрос маржи. Это просто помещает текстовые поля в содержащий элемент. Возможно, а затем установите text-align: right; стиль CSS на div.

...