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

Question

如何在html或css中修复文本（例如）？ 我将此代码用于我自己的网站边栏，但是当我写长文本<span>时，请参阅此代码2016年10月12日  我使用display: inline-block但这个css代码无效...

.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

将display: inline-block添加到h3：

＆＃13;

＆＃13;

.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;

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需将display: inline-block;添加到.widgetbox .newslist h3课程中。

Answer 3

<?xml version="1.0" encoding="utf-8"?> <sync-adapter xmlns:android="http://schemas.android.com/apk/res/android" android:contentAuthority="com.example.android.datasync.provider" android:accountType="example.com" android:userVisible="true" android:supportsUploading="true" android:allowParallelSyncs="false" android:isAlwaysSyncable="true"/> 是一个块元素，因此它旁边的范围将会降低。尝试制作h3。或者尝试向.widgetbox .newslist h3{ display:inline-block;}和{{1}提供左移}