HTML在100％宽度上输入右侧填充

Question

这是我一直存在的问题。

以下HTML：

<form id="sy_login">
    <ul class="form_column">
        <li>    
            <input id="sy_login_username" name="sy_login_username" placeholder="Username"></input>
        </li>
        <li>
            <input id="sy_login_passowrd" name="sy_login_password" placeholder="Password"></input>
        </li>
    </ul>
</form>

以下是CSS：

@CHARSET "ISO-8859-1";

body {
    background: #DDDDDD;
    padding:0px;
    margin:0px;
}

input[placeholder], [placeholder], *[placeholder] {
    font-style:italic;
}

.form_column {
    list-style-type: none;
    padding: 0px;
    margin: 10px 10px 10px 10px;
    width:100%;
}

.form_column input, .form_column textarea, .form_column select {
    width: 100%;
} 

产生以下结果：

这是对其中一个输入字段的firebug检查。

据我所知，ul由于边距而被裁剪出父form。

我需要ul由边距组成，宽度为100％，inputs宽度为100％。

更新

我尝试用填充替换边距，因为它具有相同的预期效果，但它看起来完全相同。我真的想避免在输入本身上使用静态宽度的情况。

可能对回答有用的另一个注意事项是，这只需要在HTML5中工作，交叉标准解决方案会很好，但技术上没有必要。

去除宽度后：100％

现在看起来好多了。但是我突出了输入的问题，输入需要填充文本，但ul的宽度必须是父表单的动态，其本身必须具有窗口的动态宽度。

Answer 1

从UL中删除保证金。 填写FORM。 （将自动边距设为ul）。

还要记住，当你为任何元素设置宽度为100％时，它将占用其父元素的整个宽度，现在为此元素添加一些边距或填充超出了父元素的整个宽度，可能会破坏UI

即，边距（= 10px）+宽度（= 100％）＆gt;父元素的宽度。

访问此链接以了解css box模型。

http://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/

谢谢。

Answer 2

让我们看看另一个完整版本：红色边框属于表单，蓝色边框属于UL。如果你愿意，可以删除它。

body {
    background: #DDDDDD;
    padding:0px;
    margin:0px;
}

input[placeholder], [placeholder], *[placeholder] {
    font-style:italic;
}
#sy_login{
    border:solid 1px red;
}
.form_column {   
    border:solid 1px blue;
    margin: 0px;
    padding:5px;

}
.form_column ul,li{
    list-style-type: none;
    margin:0px;
    padding:0px;
    width:auto;
}
.form_column input, .form_column textarea, .form_column select {
    width:100%;
} 

Answer 3

尝试在width:100%

上发表评论form_column

.form_column {
    list-style-type: none;
    padding: 0px;
    margin: 10px 10px 10px 10px;
    'width:100%;
}

参考 LIVE DEMO

Answer 4

.form_column {
    list-style-type: none;
    padding: 0px;
    margin:10px;    
}

Answer 5

尝试这样的事情：

.form_column {
    list-style-type: none;
    padding: 10px;
    margin: 0;
    width:100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}