垂直对齐按钮

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