CSS - 我如何對齊這些元素？

Question

請查看this page並告訴我需要更改哪些內容才能使搜索框在「KissMyBass」圖像旁邊浮動，並且距離購物車框頂部的邊距較小。我嘗試了各種各樣的浮動組合，但沒有運氣。也許它是一個定位的東西，但我不知道。

Answer 1

您可以添加到這個CSS文件：

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

確保您稍後並沒有覆蓋此屬性（你有margin:10px地方設置好的）。

Answer 2

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 3

我會改變你的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，你應該得到更多或更少你正在尋找。

UPDATE：對不起，如果我missunderstood你在做什麼，這clear: right;建議我說，你願意把旁邊這個div圖像在其右側，但低於購物車:)

Answer 4

我已經給出了父以股利的右子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) €</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>