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. 只需使用 span 而不是 div： Demo

于 2013-08-30T09:12:46.567 回答
1

您不能div嵌套在p标签内，因为p只能容纳inline元素，制作您div的 aspan并分配display: inline-block;给span元素

演示

于 2013-08-30T09:11:31.590 回答