div的位置放在FORM旁邊

我有一個小問題div我想在form旁邊放一些input標籤。當我在display: inline-block中都使用div的位置比form的位置略低。div的位置放在FORM旁邊

我真的不知道爲什麼以及如何解決這個問題。我試圖在互聯網上找到答案，但失敗了。

HTML：

<body> 
    <form class="row"> 
    <input type="text"> 
    <input type="text"> 
    <input type="text"> 
    </form> 
    <div class="row"> 
    second column 
    </div> 
</body>

CSS：

input { 
    display: block; 
} 

.row { 
    display: inline-block; 
    border: 1px solid black; 
    width: 48%; 
    height: 200px; 
}

https://jsfiddle.net/saren86/e9jt8xyk/1/

來源

2017-07-23 Mateusz Sarnowski

，其行爲總是古怪，但可以用overflow: hidden;

來解決

input { 
 
    display: block; 
 
} 
 

 
.row { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    width: 48%; 
 
    height: 200px; 
 
    overflow: hidden; 
 
}

<body> 
 
    <form class="row"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    </form> 
 
    <div class="row"> 
 
    second column 
 
    </div> 
 
</body>

來源

2017-07-23 10:18:52

如果您可以自由使用CSS3，該flex layout會是另一種選擇。

只需設置它的身體：

body { 
 
    display:flex; 
 
} 
 

 
input { 
 
    display: block; 
 
} 
 

 
.row { 
 
    border: 1px solid black; 
 
    width: 48%; 
 
    height: 200px; 
 
}

<body> 
 
    <form class="row"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    </form> 
 
    <div class="row"> 
 
    second column 
 
    </div> 
 
</body>

來源

2017-07-23 10:22:47 Marvin

只需添加浮動：左;到你的.row類，你已經修復了。

.row { 
    display: inline-block; 
    float: left; 
    border: 1px solid black; 
    width: 48%; 
    height: 200px; 
}

https://jsfiddle.net/dd5kku0k/

來源

2017-07-23 10:25:41

好，它的工作原理。但是，如果我想以中心格式和格式爲中心的話，這是不可能的。 –

添加垂直對齊：頂部; .row選擇器;

input { 
 
    display: block; 
 
} 
 

 
.row { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    width: 48%; 
 
    height: 200px; 
 
    vertical-align:top; 
 
}

<body> 
 
    <form class="row"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    <input type="text"> 
 
    </form> 
 
    <div class="row"> 
 
    second column 
 
    </div> 
 
</body>

來源

2017-07-23 11:11:33

div的位置放在FORM旁邊

回答

相關問題