1

だから、これは私が取り組んでいるコードです：

HTML

<div id="t_welcomesection">
     <h1>Hello World!</h1>

    <p>Lorem Ipsum.
        <div class="morebtn"><a href="about.html">More >></a>
        </div>
    </p>
</div>
<!-- end of welcomesection -->

CSS

.morebtn {
color: #FFF;
background-color: rgba(219,87,5,1);
font-size: 17px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
width: 100px;
text-align: center;

-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}

.morebtn:active {
color: #FFF;
-webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
-moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
}

#t_welcomesection {

float: left;

width: 800px;

text-align: justify;

padding: 0px 50px 30px 50px;

}

作業サンプルはこちら

ボタンをテキストの横に配置したい。私が持っているコードの何が問題なのかわかりません。助けていただければ幸いです。ありがとう。

4

3 に答える 3

2 
#t_welcomesection p {
display: inline-block;
}
.morebtn {
display: inline-block;
}
于 2013-08-30T09:11:44.597 に答える
2

div内に (ブロック要素) がありますp。div の代わりにスパンを使用するだけです: デモ

于 2013-08-30T09:12:46.567 に答える
1

要素のみを保持できるため、タグdiv内にネストすることはできません。 aを作成して要素に割り当てますppinlinedivspandisplay: inline-block;span

デモ

于 2013-08-30T09:11:31.590 に答える