1

私は自分のウェブサイトフォームのスタイリングに取り組んでいて、ある程度までは機能しているように見えるチュートリアルを見つけました...チュートリアルにはホバーヒントを持つコードが含まれており、このコードは物事を醜くします。すべてのフィールドが互いに並んでいるのではなく、フィールドが次々に配置され、ウィンドウ全体を包み込んでいるように見えます。

問題の機能のコード要素の後にCSSが続きます...

HTML

<form id="defaultform" class="rounded" name="form2" method="post" action="<?php echo $editFormAction; ?>">
    <h3>Contact Form</h3>

            <div class="field">
                <label for="hostess_fname">First Name:</label>
                <input type="text" class="input" name="hostess_fname" value="" id="hostess_fname" />
                <p class="hint">Enter your name.</p>
            </div>

            <div class="field">
                <label for="email">Last Name:</label>
                <input type="text" class="input" name="hostess_fname" value="" id="hostess_lname" />
                <p class="hint">Enter your email.</p>
            </div>
             <input type="submit" value="Lookup Hostess" />
<input type="hidden" name="Lookup" value="form2" />

CSS

#defaultform {

width: 500px;
padding: 20px;
background: #f0f0f0;
overflow:auto;

/* Border style */
border: 1px solid #cccccc;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;

/* Border Shadow */
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;

}

label {
font-family: Arial, Verdana;
text-shadow: 2px 2px 2px #ccc;
display: block;
float: left;
font-weight: bold;
margin-right:10px;
text-align: right;
width: 120px;
line-height: 25px;
font-size: 15px;
}

#defaultform.input{
font-family: Arial, Verdana;
font-size: 15px;
padding: 5px;
border: 1px solid #b9bdc1;
width: 300px;
color: #797979;
}

.hint{
display: none;
}

.field:hover .hint {
position: absolute;
display: block;
margin: -30px 0 0 455px;
color: #FFFFFF;
padding: 7px 10px;
background: rgba(0, 0, 0, 0.6);

-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}

同じCSSで試していた短いフォームからより多くのHTMLでコードを更新しました。また、CSSコードをいくつか追加しました。私は同じ振る舞いをしています。私はまだセレクターとそれらがどのように定義されているかなどについて混乱しています。

4

1 に答える 1

3

コードを追加したので、あなたが何をしているのかがわかります。これは非常に単純な修正ですが、キャッチするのは困難です。

CSS

.field{
    clear:both;
}

これがjsFiddleです

于 2013-02-06T03:41:21.593 に答える