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 回答