2

我有以下 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

4 回答 4

6

由于它们之间的空白，它们没有排队。

如果您要删除<input>元素之间的所有换行符和制表符，它将按您的意愿显示。

于 2009-01-05T16:08:42.513 回答
2

我发现添加float: left;到 .box 可以满足您的要求。

.box {
    padding:0px;
    margin:0px;
    float: left;
}
于 2009-01-05T16:04:16.437 回答
0

您是在谈论正确证明所有文本框吗？

如果是这样，那不是边际问题。这只是将文本框放在包含元素中。也许 a 然后设置 text-align: right; div 上的 css 样式。

于 2009-01-05T16:03:36.657 回答
0

边框不包含在宽度中，因此边框为 1px 且宽度为 150px 的框实际上将是 152 px 宽。

于 2011-05-31T09:16:30.537 回答