css - 如何使 div 内联？

Question

我正在使用包装器，但我很困惑。我希望两个 resultbox div 与 submit div 保持一致。

看这里:

http://jsfiddle.net/QtVwr/

我做错了什么？

我对 CSS 不太熟悉。

Answer 1

部分问题是您的 HTML 存在问题。这是一个开始:

1. 确保所有 div 均已关闭。
2. 从 CSS 中删除 float
3. 添加display:inline-block;
4. 从 HTML 中删除内联样式。
5. 将 .wrapper 类更正为 .wrapper1(与 HTML 匹配)

所以，我认为这更符合您的需求:

.wrapper1 {
    height:70px;
    width: 800px;
    background: #ffffff;
    border: 1px solid grey;
    color: #BDBDBD;
}

.resultbox {
    width: 300px;
    background: #ffffff;
    color: #BDBDBD;
    display: inline-block;
}

.submit {
    height:15px;
    width: 32px;
    margin-top:10px;
    background: #ffffff;
    border: 1px solid;
    color: #BDBDBD;
    display: inline-block;

}

和 HTML

<div class="wrapper1">
    <div class="resultbox" style="" >
        <div class="locationresult" style=""  form action="weezyresults.php" method="post">
            <input type="text" name="search"  size="36" value="" style="" />
        </div>    
    </div>

    <div class="resultbox" style="" >
        <div class="locationresult" style=""  form action="weezyresults.php" method="post">
            <input type="text" name="search"  size="36" value="" style="" />
        </div>    
    </div>

    <div class="resultbox" style="width:35px;" >
       <div class="submit"></div>
    </div>    

</div>

示例: http://jsfiddle.net/QtVwr/2/

你仍然需要摆弄它。但这只是一个开始。