Question

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

看看这里：

我做错了什么？

我对CSS不是很熟悉。

Answer 1

要使div内联，您应该使用以下CSS样式：

.mydiv{ display: inline; }

注意：更改包装的宽度（使其更小），您将看到结果

Answer 2

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

确保所有div都已关闭。
从您的css中删除float
添加display:inline-block;
从HTML中删除内嵌样式。
将.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/

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

Answer 3

您提供的代码存在一些问题。

您已为类包装器定义了css规则，但在html中使用了类wrapper1
类包装器没有足够的宽度用于结果框和提交
第二个结果框style="margin-left: 5px; margin-top: 3px;""
表单标记格式错误并与div标记交织在一起
表单标签未关闭
locationresult div标签未关闭
需要清除浮动

这是一个小提琴

http://jsfiddle.net/e3dg6/

Answer 4

结果框的宽度超出了包装器的宽度。您需要使包装器更宽或减小结果箱的宽度。

Answer 5

为什么在结果箱div中有提交div？为什么保证金左：10px，只有第一个div？

我会这样做：

<div id="wrapper">
<div class="resultbox"></div>
<div class="resultbox"></div>
<div id="submit"></div>
</div>

设置包装器的宽度和高度，让其他div浮动。这只是一个远景，不完全确定你想要完成什么。我只是认为你的嵌套不合适。

如何使div内联？

5 个答案: