CSS元素佈局問題

我是新來的CSS佈局，並遇到了問題。這是我目前擁有的。 http://jsfiddle.net/EPp5C/5/CSS元素佈局問題

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

還有這個問題的2個部分。第一部分：

我想列表項顯示爲

用戶名：密碼：

[文本字段] [texfield]

所以有下的文本框相應的用戶名和密碼。

來源

2013-10-30 Ultigma

，第二部分？ – BoltClock

你試過了什麼？你讀過什麼？一個快速的谷歌搜索變成了關於這個話題的大量資源 - 我會建議尋找理解css的基礎，重點關注'顯示'，'位置'，'浮動'和'清除'屬性的工作方式 – Joe

Oh sorry，the第二部分未提交。第二部分是在藍色區域內推動它大約60px。我會認爲，因爲它嵌套在nav_main div標籤內，它會自動在裏面 – Ultigma

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

我加了一個<br>一類的清晰。然後，我給這個班級的屬性clear:both;。這將推動浮線上一條新線。如果要將它們排列起來，請爲元素添加一個寬度。如果您想在頁面上進一步移動它們，請向父元素添加頁邊距。

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

來源

2013-10-30 17:39:50 James

我認爲你應該改變你的html。

您不需要將此表單信息放入ul。事實上，這在語義上是不正確的。

這裏是我的建議：

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

而且，把它的彩色div儘可能裏面，我所用margin-top上#login

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

演示

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

來源

2013-10-30 17:47:56

我建議你把裏面跨度標籤
形式兒童工作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 <範圍>標記用於在文檔中對內聯元素進行分組。

CSS（在小提琴指完整的CSS）

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

希望它可以幫助

來源

2013-10-30 18:02:35 xnome

CSS元素佈局問題

回答

相關問題