如何使用CSS修复Html中的文本

Question

How I can to fixed Text(for example ) in html or with css? I use this code for my own website sidebar, but when I write long text <span> Comes down in this code 12 oct 2016 comes down I use display: inline-block but this css code not avail..

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

Answer 1

Add the display: inline-block to the h3 :

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

Answer 2

Just add display: inline-block; into the .widgetbox .newslist h3 class as well.

Answer 3

h3是一个块元素，因此它旁边的跨度将会降低。尝试制作.widgetbox .newslist h3{ display:inline-block;} 。或者尝试向左移动h3和span