網站元素的位置

我在爲IE，Chrome和Opera渲染我的網站時遇到了問題。在Firefox中的定位效果很好：網站元素的位置

Firefox view

而在其他瀏覽器，它看起來像廢話： other browsers

我嘗試了好幾種定位和填充選項，但沒有運氣。問題出現了，我用jQuery替代替換下拉菜單以圖形化增強它。原始下拉列表仍然存在，但使用css選項「display：none」。我會很感激提示！

這裏是CSS：

這是大藍框

.searchHomeForm a, .searchHomeForm a:hover { 
    color:#000000; 
}

三個要素圍繞一個無形的盒子

div.searchHomeForm , .searchform { 
    height: 37px; 
    margin-left: auto; 
    margin-right: auto; 
}

白色的搜索欄

.search_bar { 
    position: inherit; 
    height: 25px; 
    letter-spacing: 0.02em; 
    line-height: 25px; 
    padding: 9px 0 0px 9px; 
    width: 390px; 
    border: 1px solid #95B6D6; 
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.11) inset; 
    border-radius: 0.25em 0 0 0.25em; 
}

th ËjQuery的下拉更換

#searchformReplacement { 
    background: #EBEBEB; 
    padding: 0px 1px 5px 0; 
    margin-bottom: 3px; 
    border-top: 1px solid #95B6D6; 
    border-bottom: 1px solid #95B6D6; 
    width: 109px; 
    position: inherit; 
}

查找按鈕

.find_button { 
    background: url("../images/lupevufindsearchsubmit1.png") no-repeat scroll #bBbBbB; 
    -moz-border-radius: 0.25em; 
    border-radius: 0 0.25em 0.25em 0; 
    position: inherit; 
    height: 36px; 
    line-height: 36px; 
    margin: 0px 0 3px -1px; 
    padding: 4px 10px 4px 10px; 
    width: 60px; 
    border-top: 1px solid #95B6D6; 
    border-right: 1px solid #95B6D6; 
    border-bottom: 1px solid #95B6D6; 
    border-left: none; 
    box-shadow: 2px 2px 5px rgba(76, 133, 187, 0.50) inset; 
    transition: all 0.2s ease-in-out 0s; 
}

來源

2013-03-08 Krystian

你能不能給我們一個[小提琴]（http://jsfiddle.net/）演示？ – 2013-03-08 14:25:50

爲小提琴+1，我會補充說，你應該開發與Chrome和測試其他瀏覽器:)。 – soyuka 2013-03-08 14:27:10

嘗試從.search_bar {}，#searchformReplacement {}和.find_button {}除去position: inherit添加display:inline-block每個

或添加用於每個display:inline和float:left。你可能有，如果你使用float:left

來源

2013-03-08 14:30:18 madhushankarox

謝謝，更改爲浮動顯示內聯工作！現在我會看看我是否可以將事情中心:) – Krystian 2013-03-08 14:59:36

可能使用的三個elemetns float: left;彼此相鄰？

來源

2013-03-08 14:28:03

我給你做一個小例子有需要的位置，我使用的是inline-block的禮來清除浮動（我喜歡）：

的Html

<div id="container"> 
    <input type="text" class="inline-block" /> 
    <div class="inline-block"> 
     Your custom select 
    </div> 
    <button type="submit" class="inline-block">Search</button> 
</div>

CSS

.inline-block { 
    display:inline-block; 
    *display:inline; /*IE hack*/ 
    *zoom:1; /*IE hack*/ 
} 

#container { 
    background:lightBlue; 
    width:300px; 
    margin:0 auto; 
    text-align:center; 
}

見工作fiddle！

來源

2013-03-08 14:38:56 soyuka

謝謝，爲小提琴。我無法提供小提琴，因爲它是一個聰明的項目，在拿出部件展示時它不知道如何工作。我必須檢查容器以將所有事情集中起來！謝謝！！ – Krystian 2013-03-08 15:23:44

隨着顯示內聯塊中心變得很容易與文本對齊中心;）。 – soyuka 2013-03-08 15:26:50

是的，清理你的花車非常重要，因爲madhushankarox指出。但是你並不總是需要使用浮筒，尤其是你的情況。此外，如果您需要將表單放入液體佈局頁面，這裏還有額外的好處。它應該在大多數屏幕上均勻分佈。

CSS

/*the blue rounded box*/ 
#bluebox { 
padding:3% 5%; 
margin:0 25%; 
background:#d0dcea; 
border:solid 1px #b7c2d2; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
} 

.fieldset-search { 
text-align:center; 
} 

/*The white search bar*/ 
.input-search { 
padding:5px; 
margin:0; 
width:50%; 
vertical-align: baseline; 
border: solid 1px #b7c2d2; 
background: #fff; 
outline: 0; 
} 

/*the jQuery Dropdown replacement*/ 
.list-search { 
padding:4px; 
margin:0 0 0 -5px; 
} 

/*the find button*/ 
.submit-search { 
padding:4px 10px; 
margin:0 0 0 -5px; 
}

HTML

<div id="bluebox"> 
    <div class="fieldset-search"> 
    <input type="text" name="search" class="input-search"> 
    <select name="list" class="list-search"><option></option></select> 
    <button type="search" class="submit-search">Go</button> 
    </div> 
</div>

來源

2013-03-08 15:38:13 blackhawk

網站元素的位置

回答

相關問題