現在、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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。