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

StackOverflow https://stackoverflow.com/questions/413573

  •  03-07-2019
  •  | 
  •  

Вопрос

У меня есть следующий 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, увеличив ширину, чтобы компенсировать это, но на данный момент я хотел бы получить этот простой пример для рендеринга.

Итак, как я могу удалить поля этих текстовых полей так, чтобы выровнять их правильно?

Это было полезно?

Решение

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

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

Другие советы

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

.box {
    padding:0px;
    margin:0px;
    float: left;
}

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top