网站元素的位置

我在为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

网站元素的位置

回答

相关问题