Question

请查看this page并告诉我需要更改哪些内容才能使搜索框浮动在“KissMyBass”图像旁边，并且顶部的购物车框边距离较小。我尝试过各种各样的浮子和放大器。明确的组合，但没有运气。也许它是一个定位的东西，但我不确定。

Answer 1

div#search_block_top {
    background: url("../images/bg_search.gif") no-repeat scroll left top transparent;
    clear: right;
    float: right;
    height: 26px;
    margin: -40px 9px 0 0;
    right: 210px;
    top: 55px;
    width: auto;
}

Answer 2

我会改变你的html结构，现在你已经

了

<div>shopping cart</div>
<div>image</div>
<div>search</div>

并且所有人都有float: right。结构怎么样

<div>
  <div>shopping cart></div>
  <div>search</div>
</div>
<div>image</div>

如果不改变CSS，你应该或多或少地得到你想要的东西。

更新：抱歉，如果我误解了你在做什么，这clear: right;建议我你想把这个div放在右边的图像旁边，但是在购物车下方：）

Answer 3

您可以将其添加到您的css文件中：

#search_block_top { margin-top: -40px;}

请确保您稍后不要覆盖此属性（您已在某处设置了margin:10px。）。

Answer 4

我已将父级分配给您的右子div ，所以现在您只需在代码中添加以下提及的代码即可顺利运行： - < / p>

<强>代码： -

<div style="float:right; width:460px; border:2px solid yellow;">
<div id="phoneorders" style="width: 244px; float: left;"> <img width="166" height="57" src="images/phonesupport.png"> <br>
        <img width="170" height="46" src="images/kissmybass.png"> </div>
<div id="shopping_cart"><a target="_self" class="bluelink" href="#">Shopping cart</a><br> (0)  €</div>


        <div id="search_block_top">
                <form method="post" action="#" id="searchbox">
                  <input type="text" autocomplete="off" class="search_query ac_input" id="search_query_top" name="search_query" value="" onfocus="if(this.value=='')this.value='';" onblur="if(this.value=='')this.value='';">
                  <a href="#"></a>
                  <input type="hidden" name="orderby" value="position">
                  <input type="hidden" name="orderway" value="desc">
                </form>
              </div>
        </div>

CSS - 如何对齐这些元素？

4 个答案: