Как отформатировать мою форму с помощью CSS?

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

Полагаю, вы хотите, чтобы два входа располагались рядом с меткой сверху.Если это так, я бы использовал следующий 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 к меткам.

Answer 2

Используйте метки, это то, для чего они нужны

    <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 3

Ознакомьтесь с этим руководством, которое очень полезно для динамического CSS.
http://articles.sitepoint.com/article/fancy-form-design-css и некоторые примеры http://designshack.co.uk/articles/10-css-form-examples. Они также кросс-браузерные.

Answer 4

попробуй ths ::

<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;
}