html - 网站元素的位置

Question

我在为 IE、Chrome 和 Opera 呈现我的网站时遇到问题。在 Firefox 中，定位效果很好：

而在其他浏览器中它看起来像废话：

我尝试了几种定位和填充选项，但没有运气。当我用 jQuery 替换下拉菜单以图形方式增强它时，问题就出现了。原来的下拉菜单仍然存在，但带有 css 选项“显示：无”。我会很感激你的提示！

这是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;
}

jQuery Dropdown 替换

#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;
}

Answer 1

也许float: left;在彼此相邻的三个元素上使用？

Answer 2

尝试position: inherit从 中删除.search_bar {}，#searchformReplacement {}并 为每个.find_button {}添加display:inline-block

或为每个添加display:inline和float:left。如果您使用，您可能需要清除浮动float:left

Answer 3

我给你做了一个小例子来获得所需的位置，我正在使用 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;
}

看工作小提琴！

Answer 4

是的，正如 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>