需要CSS定位幫助

我對此很陌生，非常感謝一些指導。我想用css將我的圖像放在div中。我已經使用了內聯元素，它仍然出現在圖像下面。這裏是我的代碼爲我的用戶界面按鈕：需要CSS定位幫助

#UIButtons { 
position:fixed; 
top: 50%; 
left: 40%; 
width:45em; /* this is correct and displays how I want it to*/ 
height:18em; 
margin-top: -9em; 
margin-left: -15em; 
background: url(backtabss.png); 

} 
#UIButtons ul{ /* this has set the height ok*/ 
position:relative; 
top: 9%; 
right: 50%; 
width:45em; 
} 
#UIButtons li {/*not sure what this is doing to be honest*/ 
position:relative; 
top: 70%; 
left: 45%; 
display: inline; /* this is not working my images are appearing vertical*/ 
padding: 40px; 
}

我已經評論了代碼，讓你知道發生了什麼。 HTML是：

<div id="UIButtons"> 
    <ul> 
    <li><a href="tutorials.html"><img src="beginBUT.png" alt="Click to start Tutorials" title=" Click this button to start Tutorials" width="300" height="250"/></a></li> 
    <li><a href="sChords.html"><img src="beginCHO.png" alt= "Click to view Chord Sheet" title=" Click this button to view Chord Sheet" width="300" height="250"/></a></li> 
</ul> 
</div>

謝謝你的時間。我看過這裏的其他建議，但沒有人幫助我，實際上它讓我更加困惑！

來源

2014-03-25 user3460996

您需要填寫的詳細信息..至少框架問題發佈之前..它不能創建一個jfiddle – Andy897

真的令人困惑的問題不知道你想要什麼嗎？ –

考慮傾向於使用像[Twitter Bootstrap]（http://getbootstrap.com/getting-started/）這樣的良好文檔的CSS框架，並保持它非常簡單。像這樣的框架的好處是，你不需要知道或寫入CSS。請按照他們在文檔中提供的示例進行操作。以下是一些[Bootstrap示例]（http://getbootstrap.com/getting-started/#examples）來幫助您入門。 –

你有一對夫婦的碰撞寬度，以及一些似乎做工精細，但實際上他們阻止對方。

看怎麼怪異的尺寸和這些元素的位置，當你給他們一個邊界：

http://jsfiddle.net/qaZsh/

現在，我已經刪除CSS的很多，結果是這樣的：

#UIButtons { 
     border: 1px solid blue; 
position:fixed; 
width:55em; /* this is correct and displays how I want it to*/ 
background: url(backtabss.png); 

} 
#UIButtons ul{ /* this has set the height ok*/ 
     border: 1px solid red; 
position:relative; 
top: 9%; 
} 
#UIButtons li {/*not sure what this is doing to be honest*/ 
     border: 1px solid green; 
display: inline-block; /* this is not working my images are appearing vertical*/ 
padding: 40px; 
}

http://jsfiddle.net/qaZsh/1/

我不知道這到底是什麼ÿ你想（很難猜到），但我認爲它更接近。我改變了一件事情：將inline更改爲inline-block,li。

你甚至可以將其剝離得更遠。無論如何，有時退後一步（甚至重新開始）是很好的。在這種情況下，我認爲你只是在大量絕對和相對的位置上迷路，加上積極和消極的利潤和填充。在某個時候，不可能保持概述。

來源

2014-03-25 18:06:20 GolezTrol

非常感謝你的關鍵是邊界。現在我可以看到哪個css控制了哪個元素。非常感謝你的幫助。現在，將來如果我陷入困境，我會添加邊界以查看正在發生的事情。我真的建議新用戶也這樣做，一旦你看到定位，你可以輕鬆調整定位，以滿足您的要求！ – user3460996

你應該使用inline-block的

：

#UIButtons li { 
position: relative; 
top: 70%; 
left: 45%; 
display: inline-block; 
padding: 40px; 
}

，你需要達到的寬度在這裏：

#UIButtons ul { 
position: relative; 
top: 9%; 
right: 50%; 
width: 52em; 
}

來源

2014-03-25 18:04:23 vimes1984

這個CSS代碼應該做的伎倆

#UIButtons ul { 
    list-style-type:none; 
    margin:0; 
    padding:0; 
} 

#UIButtons li { 
    display:inline; 
}

如果父容器不足以將兩個元素都保留在一行上，那麼它將把它放在下一行。不管父元素的大小，你總是希望它們在同一行上嗎？

http://jsfiddle.net/XS57H/

來源

2014-03-25 18:06:03

需要CSS定位幫助

回答

相關問題