Question

我试图让两个div出现在彼此旁边，但它只是不起作用。

我正在尝试创建一个看起来连在一起的搜索栏和按钮。我几乎在那里，除了我的按钮出现在下面，而不是与div内联。

不应该这样吗？我哪里出错了，我怎么做到这一点？

<!DOCTYPE html>
<html>
 <head>
  <title>Search Bar</title>
<style>

input {
    border: none;
    height: 18px;
    outline: none;
    padding: 5px;
}

button {
    border: 1px solid rgba(0, 39, 59, 0.2);
    margin: 0;
    height: 28px;
    padding: 0;
    width:100px;
}

.outer {
    width: 500px;
    border: 1px solid #ccc;
    padding: 10px;
}

.inner {
    width: 395px;
    border: 1px solid #ccc;
    border-right:none;
}

.button {
    display: inline-block;
    float: right;
}

</style>

</head>

<body>

<div class="outer">
    <div class="inner"><input type="text"></div>
    <div class="button"><button>Search</button></div>
</div>

</body>
</html>

enter image description here

Answer 1

将css更改为

.inner {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #CCCCCC -moz-use-text-color #CCCCCC #CCCCCC;
    border-image: none;
    border-style: solid none solid solid;
    border-width: 1px medium 1px 1px;
    display: inline-block;
    float: left;
    width: 395px;
}
input {
    border: medium none;
    height: 18px;
    outline: medium none;
    padding: 5px;
    width: 380px;
}
.button {
    display: inline-block;
    overflow: hidden;
}

button {
    border: 1px solid rgba(0, 39, 59, 0.2);
    height: 28px;
    margin: 0;
    padding: 0;
    width: 100px;
}

希望这对你有用....

Answer 2

添加

display:inline-block;

到.inner

http://jsfiddle.net/MrdHc/

Answer 3

小提琴：http://jsfiddle.net/Varinder/CD3kS/

设置display:inline-block会让你到那儿。

现在有一些有趣的东西是内联块

元素

他们在他们周围得到默认letter spacing，通常为4px

他们需要display:inline;zoom:1;黑客才能在ie7

中工作

更新了css位：

.outer {
    ...
    vertical-align:middle;
}

.inner {
    ...
    display:inline-block;
    *display:inline;
    *zoom:1;
}

.button {
    display: inline-block;
    *display:inline;
    *zoom:1;
    /*float: right*/
    margin-left:-4px;
}

.button button { height:30px; }

使两个div出现在彼此旁边，即使不应该也是如此

3 个答案: