如何在css中设置div框的级别？

请查看此链接：

如果你最小化“Javascript”区域，这样“结果”区域就会被放大，你会看到它是两个带有灰色边框的白色框，相邻的是一个黑色框，末尾有一个稍微偏离直线的黑色框

这是如何与两个白色框对齐的

谢谢

---

James

将

垂直对齐：底部
添加到
.button1
类中

.button1 {
 height: 35px;
    width: 60px;
    background: #151515;
    border:1px solid;
    border-color: #BDBDBD;
    display: inline-block;
    horizontal-align: center;
    vertical-align:bottom;
}

原因：您的
div
被定义为
内联块
。将它们视为表行。有时它们不采用相同的垂直对齐方式

注：

.search-field1获得了一个
垂直对齐：居中而.search-field2得到了一个
水平对齐：居中，我认为它不存在。
只要按一下按钮就行了

position: absolute; 

但这不是我做这些事情的最好方式

.form容器{
位置：相对位置；
浮动：无；
}
.form元素{
浮动：左；
}
尝试从标记中删除
显示内联
。然后将
float:left
添加到每个。移除
垂直对齐：9px来自输入。我还从按钮1中删除了
页边距顶部：4px
。注意：中间标记已被弃用，因此请勿用于您的网站

您可以将.button1的位置设置为相对，并添加一个top属性。这样做将允许您将按钮向下移动几个像素-在您的情况下为6px

你的.button1课是

.button1 {
    height: 35px;
    width: 60px;
    background: #151515;
    border:1px solid;
    border-color: #BDBDBD;
    display: inline-block;
    horizontal-align: center;
    position:relative;
    top:6px;
}

谢谢但它还是在左边？我怎么把它放在中心？
<input type="submit" />

<div class="button1" style="margin-top:4px;"></div>

<div id="wrapper">
    <div id="search-field1">
        <input type="text" name="search1" />
    </div>

    <div id="search-field2">
        <input type="text" name="search2" />
    </div>

    <input type="submit" />
</div>

#wrapper { text-align: center; }

#search-field1 {
    height: 35px;
    width: 320px;
    border: 1px solid #BDBDBD;
    display: inline-block;
}

#search-field2 {
    height: 35px;
    width: 320px;
    border: 1px solid #BDBDBD;
    display: inline-block;
}

input[type="submit"] {
    height: 36px;
    width: 60px;
    border: 1px solid #BDBDBD;
    display: inline-block;
}

input[type="text"] {
    height: 35px;
    width: 320px; 
    border:0px; 
}

.button1 {
    height: 35px;
    width: 60px;
    background: #151515;
    border:1px solid;
    border-color: #BDBDBD;
    display: inline-block;
    horizontal-align: center;
    position:relative;
    top:6px;
}