0

fieldset您好，我在 CSS中遇到了问题。

我有这个例子

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

margin-left: 0px;

与深色框架恰好在一条线/高度上齐平。右手边你可以看到这个类fr有

margin-right: 0px;

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

更新

您好，感谢您回答这个问题。我尝试将该代码直接实现到我的编辑器（dreamweaver cs6）中，并认为它曾经与 jsfiddle 上的样式相同。错误的。编辑器似乎有问题，因为结果我会得到这个：

cs6 字段集

看起来左侧有自动添加的标签。那么有没有人知道这个问题？多谢。

更新 2：

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

4

5 回答 5

1

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

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

于 2012-07-18T21:58:00.903 回答
0

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

于 2012-07-18T17:02:34.780 回答
0

改用它，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
}
于 2012-07-18T17:04:41.987 回答
0

是 box-sizing:border-box; 是一个很好的解决方案，但只需将输入框的大小减小 7 像素{左侧填充为 5px，左右边框的边框为 2px}，因此现在输入框的最终宽度为 173px

于 2012-07-18T19:01:02.093 回答
0

看起来您想将一些输入字段（可能是表单？）放入列中，但似乎不知道最好的方法？

我现在正在处理一个表单，实际上 - 当我想在一个 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%。但是，我发现除非我的内容需要那么多空间，否则您实际上可以将两者都浮动到左侧，并且您会更好地了解整个表单。

于 2012-07-19T13:25:11.127 回答