Question

以下是我左栏的HTML：

<div id="leftcolumn">
    <ul id="mainnavigation">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Evaluaciones</a></li>
        <li><a href="#">Docentes</a></li>
        <li><a href="#">Soporte</a></li>                
    </ul>
    <div id="loginarea">              
        Username:      
        <input type="text" name="Username" />          
        Password:          
        <input type="password" name="Password" />
        <input type="submit" value="Entrar" />
    </div>
</div>

这是我的CSS：

#leftcolumn
{
    float:left;
    position:relative;
    top:20px;
    left:20px;
}

#leftcolumn ul#mainnavigation
{
    font-size:16px;    
}

#leftcolumn ul#mainnavigation li
{
    padding-top:8px;

}

#leftcolumn ul#mainnavigation li a
{
    text-decoration:none;
    color:White;    
}

#leftcolumn ul#mainnavigation li a:hover
{
    text-decoration:underline;
    color:Lime;    
}

#loginarea
{
    margin-top:20px;    
}

#loginarea input
{
    float:left;
}

我正在尝试在左侧导航区域设置一个小型登录表单，我希望标签位于各自的文本框之上。

任何帮助？

Answer 1

使用标签，这就是它们的用途

    <label for="username">Username:</label>     
    <input type="text" name="Username" id="username" />          
    <label for="password">Password:</label>   
    <input type="password" name="Password" id="password" />
    <input type="submit" value="Entrar" />

然后，如果您使标签显示：阻止它们将在输入顶部排列

Answer 2

我猜你想要两个输入并排放在顶部的标签上。如果是这样，我会使用以下HTML：

<div id="form">
<ul>
  <li>
    <label for="username">Username:</label>     
    <input type="text" name="username" id="username" />
  </li><li>
    <label for="password">Password:</label>   
    <input type="password" name="password" id="password" />
  </li>
</ul>

<input type="submit" value="Entrar" id="submit" /></div>

然后浮动列表项并将display: block添加到标签。

#form {
  overflow: hidden;
}

#form li {
  width: 180px;
  float: left;
  margin-right: 10px;
}

#form li label {
  font-size: 11px; 
  font-weight: bold;
  display: block;
  margin-bottom: 2px;
}

#form #submit {
  clear: both;
}

Answer 3

试试::

<div id="leftcolumn">
    <ul id="mainnavigation">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Evaluaciones</a></li>
        <li><a href="#">Docentes</a></li>
        <li><a href="#">Soporte</a></li>                
    </ul>
    <div id="loginarea">              
        <label for="Username">Username:</label>     
        <input type="text" name="Username" id="Username" />          
        <label for="Password">Password:</label>      
        <input type="password" name="Password" id="Password" />
        <input type="submit" value="Entrar" />
    </div>
</div>

用这个css：

#leftcolumn
{
    float:left;
    position:relative;
    top:20px;
    left:20px;
}

#leftcolumn ul#mainnavigation
{
    font-size:16px;    
}

#leftcolumn ul#mainnavigation li
{
    padding-top:8px;

}

#leftcolumn ul#mainnavigation li a
{
    text-decoration:none;
    color:White;    
}

#leftcolumn ul#mainnavigation li a:hover
{
    text-decoration:underline;
    color:Lime;    
}

#loginarea
{
    margin-top:20px;    
}

#loginarea input
{
    display:block;
}

#loginarea label {
    display:block;
}

Answer 4

查看本教程，对动态CSS非常有帮助 http://articles.sitepoint.com/article/fancy-form-design-css 以及一些例子http://designshack.co.uk/articles/10-css-form-examples。他们也是跨浏览器。

如何用CSS格式化我的表单？

4 个答案: