Question

基本上我试图将两个垂直按钮对齐到我网站的右侧。当我onclick时，它将显示另一个div，帮助我jQuery动画。这是我的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

查看此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 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

只需删除上边距并为元素添加一个清除。 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 4

我通过将rightContent div移出rightBar div来修复它，从按钮中删除了float属性，并向rightContent div添加了一个float属性。

另请参阅JsFiddle

垂直对齐按钮

4 个答案: