2つのdivを1行に縦に並べることができません

2つのdivがあります。 1つのテキストボックスと別のボタン。両方のdivを垂直に揃えることができません。テキストボックスとボタンが同じ高さで、同じ行に垂直に配置されている必要があります。なにが問題ですか？親の2つのdivを1行に縦に並べることができません

.inputHolder{ 
 
    border:1px solid #FFF; 
 
\t vertical-align:middle; 
 
} 
 
.input{ 
 
\t margin-top:150px; 
 
\t width:100px; 
 
\t height:50px; 
 
\t border:1px solid black; 
 
\t font-size:1.2em; 
 
\t padding:5px; 
 
\t display:inline-block; 
 
} 
 
.input:focus{ 
 
\t outline:0; 
 
} 
 
.goBtn{ 
 
\t height:50px; 
 
\t width:200px; 
 
\t border:1px solid black; 
 
\t display:inline-block; 
 
}

<html> 
 
<body> 
 
\t \t <div class="inputHolder"> 
 
\t \t \t <input type="text" class="input"> 
 
\t \t \t <input type="submit" value="Go" class="goBtn"> 
 
\t \t </div> 
 
</body> 
 
</html>

出典

2017-04-07 Code Whiz

表示flexは彼らと同じ高さにし、サイド・バイ・サイド

.inputHolder { 
 
    border: 1px solid #FFF; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.input { 
 
    width: 100px; 
 
    border: 1px solid black; 
 
    font-size: 1.2em; 
 
    padding: 5px; 
 
} 
 

 
.input:focus { 
 
    outline: 0; 
 
} 
 

 
.goBtn { 
 
    width: 200px; 
 
    border: 1px solid black; 
 
}

<div class="inputHolder"> 
 
    <input type="text" class="input"> 
 
    <input type="submit" value="Go" class="goBtn"> 
 
</div>

出典

2017-04-07 18:12:00

悲しいことに、フレックスはすべてのブラウザと互換性がありません。 – TriForce

@TriForceでは、97.71％のグローバルブラウザがサポートされています。また、OPはフレックスボックスをサポートしていない特定のブラウザを掲示しませんでした。 –

しかし、問題は、それが画面の左側に揃えられており、私はそれを中心にすることができません –

をします、それはあなたがsample formをしたい、このです？

CSS

.inputHolder { 
    border: 1px solid #FFF; 
    vertical-align: middle; 
} 

.input { 
    margin-top: 150px; 
    width: 100px; 
    height: 50px; 
    border: 1px solid black; 
    /* font-size: 1.2em; */ 
    padding: 0 5px; 
    display: inline-block; 
} 

.input:focus { 
    outline: 0; 
} 

.goBtn { 
    height: 52px; 
    width: 200px; 
    border: 1px solid black; 
    display: inline-block; 
}

HTML

<div class="inputHolder"> 
    <input type="text" class="input"> 
    <input type="submit" value="Go" class="goBtn"> 
</div>

出典

2017-04-07 18:23:15 Mark

あなたはこれをしたいですか？

https://jsfiddle.net/pm3kpgL7/1/

あなたがvertical-align要素をしたい場合は、そのプロパティはその要素に、ではない彼の親に配置する必要があるので、私はちょうど入力に垂直整列を移動し、それがvertical-align: sub

.inputHolder{ 
    border:1px solid #FFF; 
    text-align:center; 
} 
.input{ 
    margin-top:150px; 
    width:100px; 
    height:50px; 
    border:1px solid black; 
    font-size:1.2em; 
    padding:5px; 
    display:inline-block; 
    vertical-align:sub; 
} 
.input:focus{ 
    outline:0; 
} 
.goBtn{ 
    height:50px; 
    width:200px; 
    border:1px solid black; 
    display:inline-block; 
}

を使用して動作します

出典

2017-04-07 18:27:11 TriForce

2つのdivを1行に縦に並べることができません

答えて

関連する問題