css - CSS - 我如何对齐这些元素？

Question

请查看此页面并告诉我需要更改哪些内容才能使搜索框浮动在“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

我已经将 div 的父级分配给了您的右侧子级 div，所以现在您只需在代码中添加下面提到的代码，它就会顺利运行：-

代码：-

<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)  €&lt;/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>

Answer 4

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

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

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