floatでの横並びについて

コーディング初心者です。

とても初歩的なことではございますが、質問させていただきます。

背景画像の上にボタンを２つ横並びにしたいのですが、
ローカルでは思うようにできているのですが、
サーバーにアップして確認するとうまく表示されません。

背景画像とボタンの画像は両方とも表示はされています。

ただ・・・
floatをかけているにもかかわらずボタンが横並びになっておらず、
縦方向に並んでしまいます。

ちなみに２つのボタンは背景画像の右側に寄せて、横並びにしたいと思っています。

ネットで検索して調べては修正をして・・・と繰り返してみたのですが、
色々と変更しすぎて、clearfixの記載場所もここでよいのかわからなくなってきました。

【「btn01」、「btn02」をbackgroundの上で横並びにさせたいです。】

何卒ご教示の程宜しくお願い致します。

~~html~~

~~css~~

.box{
height:130px;
width:900px;
margin:auto;
}

.btn01{
width:162px;
height:48px;
float:right;
margin-top:40px;
margin-right:80px;
}

.btn02{
width:144px;
height:50px;
float:right;
margin-top:40px;
margin-right:20px;
}

.box:after {
display: block;
clear: both;
content: "";
}

行動規範の内容に同意します

回答3件

ベストアンサー

ソース拝見しました。
<div class="clearfix box" style="background:url(img/btn_bg.jpg) no-repeat center" >については問題ありませんが、<div class="btn01 clearfix">の指定は間違っています。

簡単なソースを作ったので、一度頭をリセットして参考にしてみてください。

lang
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <style>
6          .clearfix{zoom:1;}
7          .clearfix:after{content:"";display: block;clear: both;height: 0;visibility:hidden;}
8          .background{
9            background-color:#CCC;
10            padding:30px;
11          }
12          .btn{
13            float:left;
14            width:50%;
15            padding:10px 0;
16            background-color:#EEE;
17            text-align: center;
18          }
19          .red{
20            background-color:#FF0000;
21          }
22        </style>
23    </head>
24    <body>
25        <section class="background clearfix">
26          <div class="btn">
27            <a href="#">ボタン1</a>
28          </div>
29          <div class="btn red">
30            <a href="#">ボタン2</a>
31          </div>
32        </section>
33    </body>
34</html>

左右のボックスを追記

lang
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <style>
6          .clearfix{zoom:1;}
7          .clearfix:after{content:"";display: block;clear: both;height: 0;visibility:hidden;}
8          .left_box{
9            float:left;
10            width:50%;
11            background-color:#CCC;
12          }
13          .right_box{
14            float:left;
15            width:50%;
16            background-color:#999;
17          }
18          .btn{
19            float:left;
20            width:45%;
21            padding:5% 0;
22            background-color:#EEE;
23            text-align: center;
24          }
25          .red{
26            background-color:#FF0000;
27          }
28        </style>
29    </head>
30    <body>
31      <div class="clearfix">
32        <section class="left_box">
33          <p>レフトボックス</p>
34        </section>
35        <section class="right_box clearfix">
36          <p>ライトボックス</p>
37          <div class="btn">
38            <a href="#">ボタン1</a>
39          </div>
40          <div class="btn red">
41            <a href="#">ボタン2</a>
42          </div>
43        </section>
44      </div>
45    </body>
46</html>

投稿2015/12/11 09:07

編集2015/12/14 02:54

junkboy

総合スコア45

退会済みユーザー

2015/12/11 10:31 編集

ご回答ありがとうございます。ソースまでいただき、ありがとうございます！こちらを参考にやり直してみましたら無事に横並びにできました！ただ、ボタン二つを、画面の半分から右側に配置したく、 width:50%のところを修正してmarginで整えようとするとうまくいきません。大変恐縮なのですが、ご教示いただけませんでしょうか。 ---------------------- 追記無事に思っていたようなボタン配置にできました！ただ、相変わらず、サーバーにアップしたところ、同じ現象がでてしまいました。コーディングミスでしょうか。私が書いたものは下記の通りです。ＨＴＭＬ <section class="background clearfix"> <div class="btn01"> <a href="#">ボタン1</a> </div> <div class="btn02"> <a href="#">ボタン2</a> </div> </section> ＣＳＳ .clearfix{zoom:1;} .clearfix:after{ content:""; display: block; clear: both; height: 0; visibility:hidden; } .background{ width:900px; height:130px; margin:auto; } .btn01{ float:left; margin-left:460px; margin-top:40px; } .btn02{ float:left; margin-left:20px; margin-top:40px;

junkboy

2015/12/11 23:20

私が書いたソースをサーバーにアップすると、どうなりますか。同じような現象が発生するのであれば、コーディングが原因の可能性は低いと思います。どうしてそのような現象が発生するのかについては、実際に見てみないとなんとも言いがたいです。

退会済みユーザー

2015/12/14 00:59

ご回答ありがとうございます。 junkboyさんが書いてくださったソースそのままですと、 backgroundの上に、ボタンが二つwidth:50%の位置（右側、左側）にある状態です。

junkboy

2015/12/14 01:12

>ボタンが二つwidth:50%の位置（右側、左側）にある状態です。というのは、左右にボタンが並んでいる(やりたいことと一致している)状態という認識でよかったですか。だとすれば、CSSは正常に読み込まれていると思いますので、CSS以外の別の要因が原因の可能性が高いように思います。 ※Dahliaさんが書いたソースを試していないのでわかりませんが、ボタンに指定している横幅や、余白などが影響して、ボタンが横並びにならない可能性もあります。

退会済みユーザー

2015/12/14 01:29 編集

説明不足で申し訳ございません。 junkboyさんの指定では、私が置きたいボタンの位置とは違いましたので、 marginで自分なりに変更したところ、うまくいかないという状況です。本当は、画面の右半分に２つのボタンを横並びにしたいです。現状、ボタンは横並びにできたけれども、位置が違うというところに苦戦しています。 ----------------- 追記 backgroundはwidth:900pxとっていまして、ボタンの余白などは、ボタン本体と合わせて900px以下でした。

junkboy

2015/12/14 02:56

↑に左右ボックスを追加したソースを追記しましたので、確認してみてください。これ以上説明するのが難しいため、float、余白(margin/padding)、width(横幅)について、もう少し知識を得て、いろいろ自分で試すのが良いと思います。これで、〆とさせて下さい。

退会済みユーザー

2015/12/14 03:31 編集

junkboyさん！ご丁寧にありがとうございました！色々とまた試してみます！

junkboy

2015/12/17 06:18

頑張ってください(・∀・)b

行動規範の内容に同意します