htmlとcssを利用してメニュー画面を作成しようとしています。
現在だと、縦並びにボタンが表示されます。それを横並び(間にスペース)に
するにはどうしたらいいでしょうか?
下記にソースを記述するのでご教示、宜しくお願いします。
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <link rel="stylesheet" href="css/style.css" type="text/css"> 5 <title>リンクメニュー</title> 6 </head> 7 <body> 8 <h1>スタイルシートを使う</h1> 9 <p>テスト</p> 10 <div class="btn"> 11 <a href="http://www.xxx.co.jp/" class="css3button" target="_blank"><img src="img/test1.png"></a> 12 </div> 13 <div class="btn"> 14 <a href="http://www.aaa.co.jp/" class="css3button" target="_blank"><img src="img/test2.png"></a> 15 </div> 16 </body> 17</html>
css
1/* 2背景色 3*/ 4body{ 5 background-color: #f6c0d1; 6 border-color: #f6c0d1; 7 color: #000000; 8 text-shadow: 0 1px 0 #eeeeee; 9} 10/* 11タイトル 12*/ 13h1{ 14 font-size:1.1em; 15 letter-spacing: 0.1em; 16 border-bottom:3px dotted #aaa; 17 padding-bottom:10px; 18 margin-bottom:1.5em; 19} 20/* 21ボタンレイアウト&デザイン 22*/ 23a.css3button { 24 font-family: Arial, Helvetica, sans-serif; 25/* 26 font-size: 16px; 27*/ 28 color: #ffffff; 29 30 padding: 10px 20px; 31 background-color:#FFFFFF; 32 33 background: -moz-linear-gradient( 34 top, 35 #FFFFFF 0%, 36 #FFFFFF); 37 background: -webkit-gradient( 38 linear, left top, left bottom, 39 from(#FFFFFF), 40 to(#FFFFFF)); 41 border-radius: 5px; 42 -moz-border-radius: 5px; 43 -webkit-border-radius: 5px; 44 border: 1px solid #04346c; 45 -moz-box-shadow: 46 0px 1px 8px rgba(000,000,000,0.7), 47 inset 0px 0px 2px rgba(255,255,255,0.7); 48 -webkit-box-shadow: 49 0px 1px 8px rgba(000,000,000,0.7), 50 inset 0px 0px 2px rgba(255,255,255,0.7); 51 text-shadow: 52 0px -1px 0px rgba(000,000,000,0.4), 53 0px 1px 0px rgba(255,255,255,0.3); 54 text-decoration:none; 55 display: block; 56 margin: 20px; 57} 58 59/* 60ボタンサイズ 61*/ 62div.btn{ 63 margin-top: 1em; 64 margin-bottom: 3em; 65 text-align: left; 66 67 line-height: 0%; 68 width: 70%; 69 70}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/06 04:14