如何讓兩個按鈕在一個範圍內一個在另一個之上出現？按鈕應該都是相同的大小。我試過vertical-align：middle和display：inline-block，但沒有成功。最終目標是在左側有一個列表，在中間有兩個按鈕，右側有一個列表。中間的按鈕將是「添加」和「刪除」，並在兩個列表之間移動項目。我發現this鏈接，但它在2004年更新，似乎是一個非常糟糕的方式來做到這一點。我一直在尋找一段時間，我不應該尋找正確的東西，所以一些指導將不勝感激。在一個範圍內將兩個按鈕之一放在另一個之上
這兩個按鈕排列在另一個之上。
首先兩個列表：
http://jsfiddle.net/xGXER/
<!DOCTYPE html>
<html>
<head>
<title>Buttons in between</title>
</head>
<body>
<ul style="background: #afa; display: inline-block; width: 100px; vertical-align: top;">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<span style="display: inline-block; width: 70px; background: #6af; vertical-align: top;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>
<ul style="background: #afa; display: inline-block; width: 100px; text-align: right; vertical-align: top;">
<li>Ein</li>
<li>Zwei</li>
<li>Drei</li>
<li>Vier</li>
</ul>
</body>
</html>
...然後兩個跨之間：
http://jsfiddle.net/JtXj2/
<!DOCTYPE html>
<html>
<head>
<title>Buttons in between spans</title>
</head>
<body>
<span style="background: #f06; vertical-align: top;">Foo bar has left the building</span>
<span style="display: inline-block; width: 70px; height: 52px; background: #06f;">
<button style="width: 70px;">Add</button>
<button style="width: 70px;">Remove</button>
</span>
<span style="background: #0f0; vertical-align: top;">Bar hopping is what we do at Friday nights</span>
</body>
</html>
如果這是您的目標+如果您有任何其他佈局問題需要立即調整，請告訴我。 –
這是我的目標，本質上。如果沒有明確設置跨度的高度，是否有任何方法來對齊按鈕？我想知道如何告訴他們垂直漂浮而不是水平... – KyleM
我更新了答案：沒有高度，並在列表中添加了「vertical-align：top」。我還測試了0-1列表項目。在Chrome中運行良好。 –
span { display:block; }
span button { float: left; width:100px; height:100px; margin:10px; clear:left; }
span .clearingelement { clear:left; }
這似乎太簡單了，但是 - 如果這個問題其實是「我如何獲得兩個按鈕出現在另一個之上的跨越」，那麼......我認爲這是你的答案。
<span>
BUTTON 1<br />
BUTTON 2
</span>
編輯：
設置列表的寬度和浮它：
<ul style="width:100px; float:left;">
<li>list item 1</li>
<li>list item 2</li>
</ul>
<span>button1<br />button2</span>
當您將此放在列表旁邊時，會導致一個按鈕浮動到列表下方。 – KyleM
的span元件是一個內聯顯示元件。爲什麼不使用塊元素的div元素？我沒有看到造型span像div
如果我使用div，則該列表必須放入div中，因爲div是獨立存在的。兩個按鈕應位於兩個列表之間，一個在另一個之上。 – KyleM
你有隻有兩個按鈕<SPAN>？我猜<SPAN>是<P>裏面，所以我希望這將是你所需要的：
您可以添加您當前的HTML和CSS？ – Patricia
你能告訴我們你的代碼有多遠？ – Galled
@不是很好。我有兩個按鈕顯示在列表旁邊，全部從左到右。 – KyleM