Question

由于某种原因，表单输入正在推离左边距。我不知道为什么！

以下是链接..

我不知道为什么会这样。可能微软是微软，并且有一些与标准冲突的随机规则。

CSS：

#content form { overflow: hidden; width: 550px; }
#content form ul { padding: 0; }
#content form li { list-style: none; float: left;  width: 250px; padding: 4px 0; }
#content form label { display: block;  width: 100px; line-height: 15px; font-size: 1em; padding-bottom: 2px; font-weight: bold;}
#content form input { display: block;  width: 200px; padding: 4px; margin: 0; line-height: 14px; font-size: .9em; background-color: #f7f7f7; border: 1px solid #d4d4d4; color: #4d4d4d; }

HTML：

        <form action="/mail.php" method="post" name="contactForm" id="contactForm">           
    <ul>
        <li>
            <label for="first_name">First Name</label>
            <input type="text" name="first_name" id="first_name" />
        </li>
        <li>
            <label for="last_name">Last Name</label>
            <input type="text" name="last_name" id="last_name" />
        </li>
        <li>
            <label for="phone">Phone</label>
            <input type="text" name="phone" id="phone" />
        </li>
        <li>
            <label for="email">Email</label>
            <input type="text" name="email" id="email" />
        </li>           
        <li class="full">
            <label for="comments">Comments</label>
            <textarea name="comments" id="comments"></textarea>
        </li>
        <li>
            <input type="submit" name="submit" id="submit" value="Submit" />
        </li>
    </ul>
    </form>

Answer 1

列表元素是负责任的，在IE中是一个非常常见的问题。

尝试设置

#content form ul { margin: 0; }
#content form li { margin: 0; }

更一般地说，您可能会发现使用reset css有用。这将删除浏览器特定的样式，并为您提供“空白画布”。我总是使用YUI Reset，但有很多选择。

只在IE6和IE7中形成问题

1 个答案: