將搜索框移動到右側

我不是一個程序員。我正在使用zencart和模板構建在線商店。好吧，當我從頭文件中刪除語言和貨幣箱時，我注意到其他一些信息如何轉移到中心位置，如搜索框。下面是代碼的一部分，我想要做的是將搜索框設置在頁面的右側，我不知道如何更改，以及從代碼中添加/刪除什麼。將搜索框移動到右側

#header-right { 
    width: 500px; 
    float: right; 
    margin-top: 30px; 
} 

#header-promo { 
    color: #d4d2d1; 
    font-size: 1.65em; 
    line-height: 25px; 
    text-align: center; 
    float: right; 
    margin-top: -80px; 
    display: none; 
} 

.promo-big { 
    color: #80ae18; 
    font-size: 150%; 
} 

.promo-green { 
    color: #80ae18; 
} 

#navMainSearch { 
    float: right; 
    position: relative; 
    top: 30px; 
    right: 10px; 
    z-index: 15000; 
} 

#navMainSearch input[type=image] { 
    vertical-align: middle; 
    margin-left: -9px; 
    margin-top: -1px; 
    position: relative; 
    z-index: 15001; 
} 

.search-header-box { 
    border: 2px solid #000000; 
    width: 300px; 
    height: 18px; 
    padding-left: 10px; 
    -moz-border-radius: 5px; 
    opacity: 0.6; 
/*filter:alpha(opacity=60);*/; 
} 

.home-icon, .login-icon, .cart-icon, .checkout-icon, .logoff-icon, .account-icon { 
    vertical-align: middle; 
    margin-right: 5px; 
} 

.h-sm { 
    height: 15px; 
    width: 15px; 
    margin-right: 10px; 
    margin-bottom: 5px; 
    vertical-align: middle; 
}

來源

2013-11-21 user3018169

玩這將是有益的，看看相關的HTML代碼了。 – showdev

@showdev：我會盡力找到併發布 – user3018169

http://pastebin.com/ALHg9J2w，你可以檢查這個代碼嗎？ – user3018169

沒有看到HTML，我會猜測並說你的頭沒有明確的寬度設置。隨着一些子元素被移除，它會摺疊以包含其子元素（包括500px .header-right塊）。您的搜索框在此500px框內右側浮動，大約會出現在頁面的中心。

要修復它，給你的標題容器一個固定的寬度。

或者更好的是，給我一個鏈接到你的網站或一個的jsfiddle我可以:)

來源

2013-11-21 23:40:01

將搜索框移動到右側

回答

相關問題