元素不顯示旁邊的文本HTML/CSS

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; 

}

見工作樣本here

我想讓按鈕在文本旁邊。我不知道我的代碼有什麼問題。非常感謝幫助。謝謝。

來源

2013-08-30 neknek mouh

問題是你不把div標籤中的一個段落..這不是有效的HTML – slash197

使用此'更多>>''通過和ampersands'未在標籤內的文字符號。 – Nitesh

@ Mr.Alien - 例如，'More > >' – Nitesh

不能嵌套一個p標記爲p內div只能容納inline元素，讓你的div一個span並分配display: inline-block;到span元素

Demo

來源

2013-08-30 09:11:31

謝謝，我學到了一些東西 –

@neknekmouh確保你使用'display：inline-block;'這樣它的行爲就像是一個塊級的元素'inline' –

yes I做了，內聯塊做了竅門 –

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

來源

2013-08-30 09:11:44 Vladimir

你有div （塊元素）在p內。只需使用範圍，而不是DIV： Demo

來源

2013-08-30 09:12:46

謝謝這個作品，但寬度不反映在span標籤 –

元素不顯示旁邊的文本HTML/CSS

回答

相關問題