4

这是我一直遇到的问题。

以下 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%;
}

产生以下结果：

在此处输入图像描述

这是对其中一个输入字段的萤火虫检查。

在此处输入图像描述

据我所知，由于边距而ul从父级中剪裁出来。form

在此处输入图像描述

我需要ul包含一个边距，同时宽度为 100%，并且宽度inputs也为 100%。

更新：

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

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

去除宽度后：100%

在此处输入图像描述

现在看起来好多了。但是我已经强调了输入的问题，输入需要对文本进行填充，但是对于ul父表单来说，它的宽度必须是动态的，而它本身必须对窗口具有动态宽度。

4

5 回答 5

2

从 UL 中删除边距。给 FORM 填充。（这为 ul 提供了自动边距）。

还请记住，当您将任何元素的宽度设置为 100% 时，它将占据其父元素的全部宽度，现在向该元素添加一些边距或填充超过了父元素的全部宽度，并且可能会破坏 UI。

即边距（=10px）+宽度（=100%）>父元素的宽度。

访问此链接以了解 CSS 盒模型。

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

谢谢你。

于 2012-11-04T17:32:19.143 回答
1

再来看一个完整版：红色边框属于表单，蓝色边框属于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%;
}
于 2012-11-04T17:46:19.863 回答
0

尝试width:100%评论form_column

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

参考现场演示

于 2012-11-04T17:16:36.623 回答
0 
.form_column {
    list-style-type: none;
    padding: 0px;
    margin:10px;    
}
于 2012-11-04T17:36:24.220 回答
0

尝试这样的事情：

.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;
}
于 2012-11-04T17:36:52.130 回答