Q&A
一応親要素にtext-aline:center 子要素にdisplay: inline-block設定してるのですが、出来ないので困ってます。
現在、id=text-1と<ul></ul>とid=text-2が縦に並んでいます。
これを横に並べるにはどうすればいいでしょうか？
HTML
1<!DOCTYPE html> 2<html lang = "ja"> 3<head> 4 <meta charset = "utf-8"> 5 <title>calculator</title> 6 <link rel="stylesheet" href="styles.css"> 7</head> 8<body> 9<div id ="container"> 10 <h1>計算してみよう</h1> 11 <div id="container-1"> 12 <input type="text" id="text-1" onKeyup="this.value=this.value.replace(/[^0-9]+/,'')"> 13 <ul> 14 <li class="btn">＋</li> 15 <li class="btn">−</li> 16 <li class="btn">×</li> 17 <li class="btn">÷</li> 18 </ul> 19 <input type="text" id="text-2" onKeyup="this.value=this.value.replace(/[^0-9]+/,'')"> 20 </div> 21</div> 22 23</body> 24</html> 25
CSS
1body { 2 font-size: 16px; 3 font-family: Arial, sans-serif; 4} 5 6#container { 7 text-align: center; 8 width: 500px; 9 margin: 15px auto; 10} 11#container-1{ 12 display: inline-block; 13} 14h1{ 15 font-size: 20px; 16 line-height:50px; 17 padding: 10px; 18} 19h1 ,ul > li { 20 border: 1px solid #ddd; 21 border-radius: 5px; 22} 23ul{ 24 25 list-style: none; 26 margin:auto; 27 padding: 0; 28} 29li{ 30 width:20px; 31 margin-bottom: 50px; 32 margin: auto; 33 cursor: pointer; 34 35}
回答2件
0
ベストアンサー
CSS
1#container-1{ 2 /*display: inline-block;*/ 3 display: flex; 4} 5```**動くサンプル：**[https://jsfiddle.net/bjtk3ohy/](https://jsfiddle.net/bjtk3ohy/) 6 7--- 8 9【よこ並びのCSS。】 10[http://lopan.jp/layout/](http://lopan.jp/layout/)
投稿2019/03/01 15:22
総合スコア69400
0
displayをinline-blockやflexで指定すると横並びになります。
inline-block参考サイト: https://www.sejuku.net/blog/52822
flex参考サイト: https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
投稿2019/03/01 14:24
総合スコア211
#container-1 {
width: 600px;
font-size: 0;
}
#text-1,
#container-1 > ul,
#text-2 {
display: inline-block;
}
#container-1 > ul {
font-size: initial;
}
inline-blockを使う場合、親要素にfont-size:0を指定し、子要素にdisplay: inline-blockを指定します。
そして子要素の文字に対してfont-sizeを任意の大きさに指定すれば出来ます。
上記のCSSは先程記述した参考サイトの解説どおりに書いたものです。
一度お試しください。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。