垂直對齊按鈕

Question

基本上我試圖將兩個垂直按鈕對齊我的網站的右側。當我點擊時，它會顯示另一個幫助我jQuery動畫的div。這裏是我的html代碼：

<div id="rightBar"> 
     <input type='button' id='hideshow' value='Show/Hide' /> 
     <input type='button' id='hideshowBookmark' value='Bookmark' /> 
     <div id='rightContent'> 
      <table style="width:100%; text-align: center;padding: 2px;"> 
       <th colspan="2"><b>Get Directions</b></th> 
       <tr><td>&nbsp;</td></tr> 
       <tr> 
        <td width="120px"><label class="title">Get Location: </label></td> 
        <td><input id="txtFrom" type="text" class="textInput" placeholder="Outram" />&nbsp;<img id="AutoFrom" src="img/map.jpg" class="button_search" onclick="GetDataFrom();"/>&nbsp;<label class="title">To</label>&nbsp; <input id="txtTo" type="text" class="textInput" placeholder="Hougang mall" />&nbsp;<img id="AutoTo" src="img/map.jpg" class="button_search" onclick="GetDataTo();" /></td> 
       </tr> 
      </table> 
      <div id="divDirectionResults" style="display: none; border:1px solid black; opacity: 0.8; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); background:#000000; width:auto; height:190px;"></div> 
      <table style="width:100%; text-align: center;padding: 2px;"> 
       <tr> 
        <td colspan="2" style="padding-left:45px;"><input id="CbAvoid" type="checkbox" checked="checked" />&nbsp; Avoid ERP</td> 
       </tr> 
       <tr><td>&nbsp;</td></tr> 
       <tr> 
        <td style="width: 35%;">&nbsp;</td> 
        <td><input value="Get Routing" type="button" onClick="getDirections();" style="width: 109px; height: 23px;font-size:7pt;font-weight:bold;"/><input type="button" onclick="resetSearchField();" style="width: 58px; height: 23px;font-size: 7pt;font-weight:bold;" value="Reset"/></td> 
       </tr> 
      </table> 
      <div id="divComputedDirection"> 
      </div> 
     </div> 
    </div> 

而且我的JavaScript：

 $(document).ready(function() { 
    $('#hideshow').click(function() { 
     $('#rightContent').animate({ 
      width: 'toggle' 
     }, 1000 
       ); 
    }); 

    $('#hideshow').val('H\ni\nd\ne\n/\nS\nh\no\nw'); 
    $('#hideshowBookmark').val('B\no\no\no\nk\nm\na\nr\nk'); 
}); 

而CSS：

#rightBar 
{ 
    float: right; 
} 

#hideshow 
{ 
    float: right; 
    padding: 10px; 
    background: linear-gradient(#81BEF7,#2E9AFE); 
    border-radius: 3px; 
    font-weight: bold; 
    border: 0; 
} 
#hideshow:active 
{ 
    outline:none; 
} 
#hideshowBookmark 
{ 
    float: right; 
    padding: 10px; 
    background: linear-gradient(#81BEF7,#2E9AFE); 
    border-radius: 3px; 
    font-weight: bold; 
    border: 0; 
    margin-top: 170px; 
} 
#hideshowBookmark:active 
{ 
    outline:none; 
} 

#rightContent 
{ 
    width: 320px; 
    height: 440px; 
    background-color: white; 
    display: none; 
    margin-right: 40px; 
    border-radius: 5px; 
    border: 1px solid grey; 
} 

不知何故，DIV中的元素向下移動，當我點擊第一個按鈕。而我的第二個按鈕沒有對齊到右側。

這裏是我的小提琴：Fiddle Link

我不知道爲什麼會這樣呢？是因爲我的CSS還是我放置html組件的方式？

在此先感謝。

Answer 1

只需刪除頂部邊距併爲元素添加清除。 Clear做它所說的，它從流中清除漂浮的元素。

只要改變你的CSS這樣的：

#hideshowBookmark 
{ 
    float: right; 
    padding: 10px; 
    background: linear-gradient(#81BEF7,#2E9AFE); 
    border-radius: 3px; 
    font-weight: bold; 
    border: 0; 
    clear:both; 
} 

下面是更新Fiddle。

這裏有一些關於Clear的好文檔。

Answer 2

更改CSS這個類以下內容：

#hideshowBookmark 
{ 
    float: right; 
    padding: 10px; 
    background: linear-gradient(#81BEF7,#2E9AFE); 
    border-radius: 3px; 
    font-weight: bold; 
    border: 0; 
    margin-top: 170px; 
    position: absolute; 
    right: 7px; 
} 

fiddle

Answer 3

檢查出這個fiddle

您需要的CSS添加到div rightBar這個CSS

#rightBar 
{ 
    float: right; 
    position:relative; 
} 

和#hideshowBookmark

#hideshowBookmark 
{ 
    float: right; 
    padding: 10px; 
    background: linear-gradient(#81BEF7,#2E9AFE); 
    border-radius: 3px; 
    font-weight: bold; 
    border: 0; 
    margin-top: 170px; 
    position:absolute; 
    right:0; 
} 

Answer 4

我通過將rightContent div移出rightBar div來修復它，從按鈕中刪除浮動屬性並將浮動屬性添加到rightContent div。

另請參見JsFiddle