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

概述这是我一直有的问题. 以下HTML： <form id="sy_login"> <ul class="form_column"> <li> <input id="sy_login_username" name="sy_login_username" placeholder="Username"></input> </li> 这是我一直有的问题.

以下HTML：

<form ID="sy_login">    <ul >        <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是由于边距而削减了父表格.

我需要ul包含边距,宽度为100％,输入宽度也为100％.

更新：

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

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

去除宽度后：100％

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

解决方法 从ul中删除保证金.
填写FORM. (给自动边距为ul).

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

即边距(= 10px)宽度(= 100％)>父元素的宽度.

访问此链接以了解CSS Box模型.

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

谢谢.

总结

以上是内存溢出为你收集整理的HTML在100％宽度上输入右侧填充全部内容，希望文章能够帮你解决HTML在100％宽度上输入右侧填充所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。