当前位置: 动力学知识库 > 问答 > 编程问答 >

css3 - CSS element layout problems

问题描述:

I'm new to CSS layouts and have hit a problem.

This is what I currently have. http://jsfiddle.net/EPp5C/5/

#login {

margin: 0;

padding: 0;

width: 500px;

float: right;

}

#login ul {

margin: 0;

padding: 0;

}

#login ul li {

margin: 0;

padding: 0;

display: inline-block;

font-size:14px;

color: white;

}

There are 2 parts to this question.

First part:

I would like the list items to be displayed as

Username: Password:

[textfield] [texfield]

so have the textfields under the corissponding username and password.

网友答案:

http://jsfiddle.net/EPp5C/6/

I added a <br> with a class of clear. I then gave this class the attributes of clear:both;. This will push the floats onto a new line. If you want to line them up, add a width to the elements. If you want to move them further up the page, add a margin-top to the parent elements.

    <ul>
        <li>Username: </li>
        <li>Password: </li>
        <br class="clear" />
        <li><input type="text" name="username" /></li>
        <li><input type="text" name="password" /></li>
    </ul>


.clear { clear:both; }
网友答案:

I think you should change your html.

You do not need to put this form info in a ul. In fact, that would be semantically incorrect.

Here is what I suggest:

HTML

<div id="login">
    <form>
        <label>Username:</label><label>Password:</label> 
        <br />
        <input type="text" name="username" />
        <input type="text" name="password" />
    </form>
</div>

CSS

label{
    display:inline-block;
    width:170px;
    color: #fff;
}

Also, to put it inside the colored div as much as possible, I used margin-top on the #login

#login {   
    margin: 0;
    padding: 0;
    width: 500px;
    float: right;
    **margin-top:-30px;**
}

Demo

http://jsfiddle.net/EPp5C/9/

网友答案:

i suggest you to put the form child inside span tag
working fiddle

HTML

<div id="login">
  <form>
    <span>Username:<input type="text" name="username" /></span>&nbsp
    <span>Password:<input type="text" name="password" /></span>  
  </form>
</div>

reference:The <span> tag is used to group inline-elements in a document.

CSS (refer complete CSS at the fiddle)

span{
  margin-right:10px;
  display:inline-block;
  width:220px;
  color: #fff;
}

hope it can help

分享给朋友:
您可能感兴趣的文章:
随机阅读: