css fieldset边框

你好我有一个在CSS中的fieldset的问题。css fieldset边框

在这个例子中，你可以看到，左侧边框

margin-left: 0px;

刷新恰好在一行中/高与黑暗的框架。右手边可以看到类fr有

margin-right: 0px;

不过，这并不与框架边框冲洗。我曾试图Google，但我找不到任何内容。这个现象正常吗？我做错了什么？有一些特定的边界吗？

UPDATE

你好，谢谢你回答这个问题。我试图直接在我的编辑器（dreamweaver cs6）中实现该代码，并认为它的风格与jsfiddle相同。错误。好像有一个与编辑一个问题，因为作为一个结果，我会得到这样的：

cs6 fieldset

它看起来像有左手边自动添加标签。那么是否有人知道这个问题？非常感谢。我不得不重置css的默认设置。

来源

2012-07-18 bonny

我会主要的一点是你的标签设置为80px宽，输入设置为180px宽。

可能需要它们的尺寸相同。我也会检查你的数学，以确保它们都合适。

来源

2012-07-18 21:58:00

我检查了它，应该有足够的空间。该字段的宽度为440px。减去180倍的输入宽度的两倍意味着360px使得80px的空间。减去10px填充左边将是70px。所以我更新了我的问题，似乎编辑器可能存在问题。谢谢。 – bonny 2012-07-19 08:04:00

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

来源

2012-07-18 17:02:34

我更新了我的问题。谢谢。 – bonny 2012-07-19 08:06:02

使用此相反，箱上浆：边界框使得从所述输入元件，而不是外部内部使用的填充。

#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-18 17:04:41

我更新了我的问题。谢谢 – bonny 2012-07-19 08:05:46

yes box-sizing：border-box;是一个很好的解决方案，但只需减小输入框7像素的大小（左侧填充为5px，左侧和右侧边框的边框为2px），所以现在最终输入框的宽度为173px

来源

2012-07-18 19:01:02

我更新了我的问题。谢谢。 – bonny 2012-07-19 08:08:24

是的，你应该使用reset css来重置html标签的所有默认属性（如input，fieldset）。 – 2012-07-19 11:54:51

它看起来像你想把一些输入字段（一种形式，也许？）成列，似乎并不知道最好的方式来做到这一点？

我正在处理一个表单，实际上 - 当我想在一个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元素顺序，我不是说使用我的CSS，而是采用你自己的方法 - 当你排除故障时可以节省时间）

记住，一世如果你想要父元素（不管div是否包含表单），所有的子元素也必须被浮动。

现在，您可能会认为将columnA向左浮动并且columnB向右浮动，一旦添加了边距和填充，两者的宽度都会增加50％。但是，我发现除非我的内容需要那么多的房地产，否则实际上可以向左移动，并且您将更好地查看整个表格。

来源

2012-07-19 13:25:11

css fieldset边框

回答

相关问题