顯示包含位置按鈕的問題：相對位置：絕對

我試圖顯示由合併文本和圖像組成的垂直按鈕列表。我使用position：relative和position：absolute來合併文本和圖像。顯示包含位置按鈕的問題：相對位置：絕對

<div class="well"> 
    <div style="position:relative;"> 
    <img src="assets/launch_item.png" style="position:absolute;"/> 
     <div style="position:absolute;padding: 16px 0px 0px 55px;"> 
     <h5 style="float:left;width:300px;">Option1</h5> 
     <a href="http://localhost:3000" style="padding: 0px 0px 0px 0px;"><div class="btn btn-success">Go</div></a> 
     </div> 
    </div> 
    <div style="position:relative"> 
    <img src="assets/launch_item.png" style=position:absolute;"/> 
    <div style="position:absolute;padding: 16px 0px 0px 55px;"> 
     <h5 style="float:left;width:300px;">Option2</h5> 
     <a href="http://localhost:3000" style="padding: 0px 0px 0px 0px;"><div class="btn btn-success">Go</div></a> 
    </div> 
    </div> 
</div>

組合按鈕結果OK，但在父窗口中排列按鈕似乎存在問題。如上圖所示，只顯示兩個按鈕中的一個。此外，該按鈕被拍到現有的窗口而不是「適合它」。我該如何解決這個問題？

enter image description here

來源

2013-05-17 Ya.

爲您的圖片，CSS和Jscript提供一個代碼問題部分的小提琴代碼。 – Nitesh

取出float的h5內，並與position控制它，因爲你已經做了relative定位父Div，所以我建議用absolute定位創造它裏面的元素，比如你有什麼完成其餘的元素。希望這可以幫助。

編輯

這裏是Solution。

更新的代碼：

<div class="well" style="position:relative;"> 
    <div style="width:300px;"> 
    <img src="assets/launch_item.png" style="position:absolute;"/> 
    <div style="position:absolute;padding: 8px 0px 0px 55px;"> 
     <h5 style="width:300px;position:absolute;">Option1</h5> 
     <a href="http://localhost:3000" style="padding: 0px 0px 0px 250px;position:absolute"><div class="btn btn-success">Go</div></a> 
    </div> 
    </div> 
    <div style="width:300px; left:305px; top:0; position:absolute;"> 
    <img src="assets/launch_item.png" style="position:absolute;"/> 
    <div style="position:absolute;padding: 8px 0px 0px 55px;"> 
     <h5 style="width:300px;position:absolute;">Option2</h5> 
     <a href="http://localhost:3000" style="padding: 0px 0px 0px 250px;position:absolute"><div class="btn btn-success">Go</div></a> 
    </div> 
    </div> 
</div>

希望這有助於。

編輯 - 2

通常爲菜單，UL和LI起着至關重要的作用。考慮到您的代碼與position沒有問題的影響，只是該列表項對這些東西更有用。爲您提供new solution with list items as vertical menu。這就像您進一步參考瞭解使用列表項目創建菜單樣式。希望這可以幫助。

This資源被用於在垂直菜單中創建列表項的研究過程中。

希望這可以讓您的工作更輕鬆。 :)

來源

2013-05-17 05:43:29 Nitesh

這樣做但結束效果仍然相同：只有第二個按鈕是可見的。在jsfiddle中更新代碼http://jsfiddle.net/tromanow/faRk7 –

找到我更新的答案 - @Ya。 – Nitesh

如果您對答案滿意，您可以通過綠色勾號接受它，並且如果沒有，請讓我知道相同的查詢/問題。 - @Ya。 – Nitesh

將overflow:hidden應用於類well的div，以便按鈕將適合該父div。

來源

2013-05-17 05:53:37

它所做的就是剔除不適合的零件。 –

顯示包含位置按鈕的問題：相對位置：絕對

回答

相關問題