Question

我正在设计我的网站表单样式并找到一个似乎可以解决问题的教程...该教程包含了悬停提示的代码，而这段代码导致事情变得难看。他们似乎试图将自己一个接一个地放在窗户旁边，而不是一直排在一起的字段。

这是有问题的功能的代码元素，后跟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尝试使用更短的表单来更新代码。我还添加了一些CSS代码。我有同样的行为。我仍然对选择器以及如何定义它们感到困惑。

Answer 1

我已经看到你现在正在做什么，你已经添加了你的代码。这是一个非常简单的修复，但很难理解：

CSS

.field{
    clear:both;
}

这是 jsFiddle

CSS表单似乎没有任何换行符

1 个答案: