Question

正如您在此处所见：http://st358373.cmd16c.cmi.hanze.nl/contact.html＆lt;我的代码到处都是，我不知道如何解决它。其他页面还可以。

这是我的联系表单HTML：

<ul>
    <li>
        <h2>Neem contact op</h2>
        <span class="required_notification">* Verplicht in te vullen</span>
    </li>
    <li>
        <label for="name">Naam:</label>
        <input type="text" name="name" placeholder="Harry Potter" />

    </li>
    <li>
        <label for="email">Email:</label>
        <input type="text" name="email" placeholder="harry_potter@flyingowl.com" />
        <span class="form_hint">Goed formaat "harry@voldemortsucks.com"</span>
    </li>
    <li>
        <label for="website">Website:</label>
        <input type="text" name="website" placeholder="http://voldemortsucks.com/" />
        <span class="form_hint">Goed formaat "http://dumbledoresarmy.com"</span>
    </li>
    <li>
        <label for="message">Bericht:</label>
        <textarea name="message" cols="40" rows="6"></textarea>
    </li>
    <li>
        <button class="submit" type="submit">Verstuur</button>
    </li>
</ul>

我的CSS：

:-moz-placeholder {
    color: grey;

}

::-webkit-input-placeholder {
    color: grey;
}

*:focus {outline: none;}

body {
    font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}

.contact_form h2, .contact_form label {font-family: 'Raleway', sans-serif;}

.form_hint, .required_notification {font-size: 11px;}

ul {
    width: 750px;
    list-style-type: none;
    list-style-position: outside;
    margin: 0px;
    padding: 0px;
    margin-top: 10%;
    float: right;

}

li {
    padding: 12px;
    border-bottom: 1px solid #eee;
    position: relative;
    color: white;
}

li:first-child, li:last-child {
    border-bottom:1px solid #777;
}

h2 {
    margin: 0;
    display: inline;
    color: white;
}

.required_notification {
    color: #d45252;
    margin: 5px 0 0 0;
    display: inline;
    float: right;
}

label {
    width: 150px;
    margin-top: 3px;
    display: inline-block;
    float: left;
    padding: 3px;
}

input {
    height: 20px;
    width: 220px;
    padding: 5px 8px;
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}

textarea {
    padding: 8px; 
    width: 300px;
    border: 1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
}
button {margin-left: 156px;}

button.submit {
    background-color: white;

}

我该如何解决这个问题？

Answer 1

我建议你先从ul元素中删除css。像宽度和浮动：右;

Answer 2

问题是您要为此ul声明css而不给它id或class。给它一个类，如下面的代码：

<ul class="contactForm">
  <li>
    <h2>Neem contact op</h2>
    <span class="required_notification">* Verplicht in te vullen</span>
  </li>
  <li>
    <label for="name">Naam:</label>
    <input type="text" name="name" placeholder="Harry Potter"/>
  </li>
  <li>
    <label for="email">Email:</label>
    <input type="text" name="email" placeholder="harry_potter@flyingowl.com"/>
    <span class="form_hint">Goed formaat "harry@voldemortsucks.com"</span>
  </li>
  <li>
    <label for="website">Website:</label>
    <input type="text" name="website" placeholder="http://voldemortsucks.com/"/>
    <span class="form_hint">Goed formaat "http://dumbledoresarmy.com"</span>
  </li>
  <li>
    <label for="message">Bericht:</label>
    <textarea name="message" cols="40" rows="6"></textarea>
  </li>
  <li>
    <button class="submit" type="submit">Verstuur</button>
  </li>
</ul>

你的css CSS：

:-moz-placeholder {
    color: grey;
}
::-webkit-input-placeholder {
    color: grey;
}
*:focus {
    outline: none;
}
body {
    font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;
}
.contact_form h2, .contact_form label {font-family: 'Raleway', sans-serif;}
.form_hint, .required_notification{
    font-size: 11px;
}
ul.contactForm {
    width: 750px;
    list-style-type: none;
    list-style-position: outside;
    margin: 0px;
    padding: 0px;
    margin-top: 10%;
    float: right;
}
ul.contactForm li {
    padding: 12px;
    border-bottom: 1px solid #eee;
    position: relative;
    color: white;
}

Answer 3

您的主要css未包含在此页面中请检查并在您的联系页面中添加此css：

<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>

Answer 4

替换margin-top课程中padding-top的{{1}}：

.titel

Answer 5

永远不要将CSS提供给ul或li，请使用类来执行此操作。您已经直接在ul，li上使用了css，这对每个地方都有影响..
在不同的细分中划分页面，您可以在单独的文件中编写菜单部分，并且可以包含在所有页面中。

为什么要为身体增加保证金？

body {
 margin: 8px; // remove it.
}

为什么在联系人菜单中添加了div？

将其删除

您可以使用@kittyCat表单设计和css。

实现这一点，然后在需要帮助时了解我。

联系表单推动该地方的导航

5 个答案: