css fieldset边框

Question

您好我的CSS中有fieldset的问题。

I have this example

在此示例中，您可以看到左侧是边框

margin-left: 0px;

使用暗框准确地在一条线/高度上冲刷。右边你可以看到班级fr有

margin-right: 0px;

但它没有与框架边框齐平。我曾尝试谷歌，但我找不到任何东西。这种现象是正常的还是我做错了什么？是否有一些特定的边界？

更新

你好，谢谢你回答这个问题。我试图将代码直接实现到我的编辑器（dreamweaver cs6）中，并认为它曾经是与jsfiddle相同的样式。错误。看起来编辑器有问题，因为我会得到这个：

看起来左侧有自动添加的标签。所以有谁知道这个问题？非常感谢。

更新2：

我不得不重置css默认设置。

Answer 1

我想说的主要是你的标签设置为80px宽，输入设置为180px宽。

可能需要它们大小相同。我还会检查你的数学，以确保它们正确加起来。

Answer 2

将box-sizing: border-box添加到输入中。 （还为相关供应商添加-moz-box-sizing和-webkit-box-sizing）

Answer 3

使用它， box-sizing：border-box 会导致填充从输入元素内部而不是外部使用。

#left #frame form fieldset ul input {
position:relative
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box
}

Answer 4

是盒子尺寸：边框;是一个很好的解决方案，但只是减小输入框7像素的大小{左侧填充5px和左侧和右侧边框边框2px}所以现在输入框的最终宽度是173px

Answer 5

看起来你想把一些输入字段（一个表单，也许是？）放入列中，似乎不知道最好的方法吗？

我现在正在处理一个表单，实际上 - 当我想在div中有两列时，我就是这样做的。

 <form>
   <fieldset>
    <legend>The form to fill out</legend>
      <p> Any instructions for the form. Fields marked with <span class="red">Red</span> are required.</p>

     <div class="columnA">
       <label for="fname">Label 1</label>
       <input type="text" name="fname" tabindex="1" />
     </div>

     <div class="columnB">
       <label for="address1">Address:</label>
       <input type="text" name="address1" tabindex="10" />
     </div>

     <div class="fullwidth">
       <input type="submit" value="Register"/>
     </div>
   </fieldset>
 </form>

然后，确保在CSS中为上述每个类设置（最低限度）这些内容：

余量 填充 宽度

（建议：我实际上在我的CSS的每个部分中首先设置它们 - 如果我有自己的CSS元素顺序，它给了我一个结构。我不是说使用我的，但是采用自己的 - 它节省了时间当你进行故障排除时）

请记住，如果你想要父元素（无论div是否包含表格），所有子元素也必须浮动。

现在，您可能会认为将columnA向左移动，将columnB向右移动，一旦添加了边距和填充，两者都设置为加起来为50％的宽度。但是，我发现除非我的内容需要大量的空间，否则你实际上可以向左移动，你可以更好地查看整个表单。