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

I'm working on styling my website forms and found a tutorial that seems to work up to a point... The tutorial includes code to have hover hints, and this code is causing things to get ugly. Instead of the fields all lining up under one another they seem to be attempting to position themselves one right after another and wrapping all the way down the window.

我正在设计我的网站表单的样式，并找到了一个似乎在某一点上工作的教程...该教程包含了悬停提示的代码，而这段代码导致事情变得丑陋。他们似乎试图将自己一个接一个地放在窗户上，而不是将所有字段排列在一起。

Here is the code element for the feature in question followed by the CSS...

这是有问题的功能的代码元素，后跟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;
}

I just updated the code with more of the HTML from a shorter form that I was trying with the same CSS. I also added some more of the CSS code. I'm getting the same behavior. I'm still confused on selectors and how those are defined and stuff.

我刚刚使用相同的CSS尝试使用更短的表单来更新代码。我还添加了一些CSS代码。我有同样的行为。我仍然对选择器以及如何定义它们感到困惑。

1 个解决方案

#1

I see what you're doing now that you've added your code. It's a pretty simple fix, but hard to catch:

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

CSS

.field{
    clear:both;
}

Here's the jsFiddle

这是jsFiddle

#1