元素不显示在文本HTML / CSS旁边

So this is the code I'm working on:

所以这是我正在研究的代码:

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;

}

See working sample here

在这里查看工作示例

I want the button to be next to the text. I don't know what's wrong with the code I have. Help is much appreciated. Thanks.

我希望按钮位于文本旁边。我不知道我的代码有什么问题。非常感谢帮助。谢谢。

3 个解决方案

#1

You cannot have div nested inside a p tag as p can only hold inline elements, make your div a span and assign display: inline-block; to the span element

您不能将div嵌套在p标记内,因为p只能保存内联元素,使div成为span并指定display:inline-block;到span元素

Demo

#2

#t_welcomesection p {
display: inline-block;
}
.morebtn {
display: inline-block;
}

#3

You've got div (a block element) inside a p. Just use span instead of div: Demo

你在p里面有div(一个块元素)。只需使用span而不是div:Demo

#1