如何在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;
}

你在谈论正确对齐所有文本框吗？

如果是这样，那不是保证金问题。这只是将文本框放在包含元素中。或许a然后设置text-align：right; div上的css风格。

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top