2016-10-26 6 views
1

HTMLやCSSでテキストを(たとえば)修正する方法はありますか? ..私は私の自身のウェブサイトのサイドバーのためにこのコードを使用しますが、私は長い文章を書くとき<span>は、2016年10月12日がダウンし、私がdisplay: inline-block使用 来て、このコードでダウンしていますが、このCSSコードは、役に立つないCSSでHtmlのテキストを修正する方法

.widgetbox{ 
 
\t border:1px solid rgba(0,0,0,0.2); 
 
\t box-shadow:2px 2px 2px rgba(0,0,0,0.1); 
 
\t border-radius:3px; 
 
} 
 
.widgetbox .widgetboxTitle{ 
 
\t background: rgba(0, 0, 0, 0.3); 
 
\t padding:5px 10px; 
 
} 
 
.widgetbox .contentarea{ 
 
\t padding:7px; 
 
\t } 
 
.widgetbox .newslist { 
 
\t margin-bottom: 15px; 
 
} 
 
.widgetbox .newslist img { 
 
\t border:1px solid rgba(0, 0, 0, 0.1); 
 
\t border-radius: 3px; 
 
\t float: right; 
 
\t margin: 0 0 0 5px; 
 
} 
 
.widgetbox .newslist h3 { 
 
\t font-size: 14px; 
 
} 
 
.widgetbox .newslist span{ 
 
\t color: rgba(0, 0, 0, 0.4); 
 
\t display: inline-block; 
 

 
}
<div class="widgetbox"> 
 
<div class="widgetboxTitle"> 
 
<h4>News</h4> 
 
</div> 
 
<div class="contentarea"> 
 
<div class="newslist"> 
 
<img src="http://s9.picofile.com/file/8272330300/last_tech2.jpg" alt="ASUS"> 
 
<h3>New Lap top</h3> 
 
<span>12 oct 2016</span> 
 
</div> 
 
    </div> 
 
</div>

答えて

1

h3display: inline-blockを追加します。

.widgetbox{ 
 
\t border:1px solid rgba(0,0,0,0.2); 
 
\t box-shadow:2px 2px 2px rgba(0,0,0,0.1); 
 
\t border-radius:3px; 
 
} 
 
.widgetbox .widgetboxTitle{ 
 
\t background: rgba(0, 0, 0, 0.3); 
 
\t padding:5px 10px; 
 
} 
 
.widgetbox .contentarea{ 
 
\t padding:7px; 
 
\t } 
 
.widgetbox .newslist { 
 
\t margin-bottom: 15px; 
 
} 
 
.widgetbox .newslist img { 
 
\t border:1px solid rgba(0, 0, 0, 0.1); 
 
\t border-radius: 3px; 
 
\t float: right; 
 
\t margin: 0 0 0 5px; 
 
} 
 
.widgetbox .newslist h3 { 
 
\t display: inline-block; 
 
\t font-size: 14px; 
 
} 
 
.widgetbox .newslist span{ 
 
\t color: rgba(0, 0, 0, 0.4); 
 
\t display: inline-block; 
 

 
}
<div class="widgetbox"> 
 
<div class="widgetboxTitle"> 
 
<h4>News</h4> 
 
</div> 
 
<div class="contentarea"> 
 
<div class="newslist"> 
 
<img src="http://s9.picofile.com/file/8272330300/last_tech2.jpg" alt="ASUS"> 
 
<h3>New Lap top</h3> 
 
<span>12 oct 2016</span> 
 
</div> 
 
    </div> 
 
</div>

1

display: inline-block;.widgetbox .newslist h3クラスに追加するだけです。

1

h3はブロック要素であるので、横にスパンが.widgetbox .newslist h3{ display:inline-block;} .ORはフロートを与えてみてくださいがh3span

の両方に残っていることを作るdown.Try来ます
関連する問題