Question

我有一个侧边栏小部件，我正在尝试使用CSS设置样式。这是HTML（为简洁起见，我省略了除<li>个节点之外的所有节点）：

＆＃13;

.tagcloud, .trending-box {
    	padding: 1em;
    	background-color: #f3f3f3;
    	border: none;
    	border-top: none;
    
    }
    .tagcloud > a, .trending-box > ul > li > span.tptn_after_thumb > a { color: #7b6100; }
    .trending-box > ul > li { list-style-type: none; margin-bottom: 1em; }
    .trending-box > ul > li:last-child { margin-bottom: 0px; }
    .trending-box > ul { padding: 0px; margin: 0px; }
    .trending-box > ul > li > span.tptn_after_thumb { margin-left: 1em; }
    .trending-box > ul > li.trend-item > span.imagespan > a > img {
    	height: 50px;
    	width: 50px;
    	border-radius: 50% !important;
    }

＆＃13;

<div class="trending-box">
    	<ul id="trending-list">
    		<li class="trend-item">
    			<span class="imagespan">
    				<a href="" class="tptn_link">
    					<img src="http://i.imgur.com/mj70dV9.jpg" width="150" height="150" class="tptn_thumb tptn_featured">
    			</a>
    			</span>
    			<span class="tptn_after_thumb">
    				<a href="" class="tptn_link">
    					<span class="tptn_title">
    						Lorem Ipsum is a Dummy Text
    					</span>
    				</a>
    			</span>
    		</li>
    		<li class="trend-item">
    			<span class="imagespan">
    				<a href="" class="tptn_link">
    					<img src="http://i.imgur.com/mj70dV9.jpg" width="150" height="150" class="tptn_thumb tptn_featured">
    				</a>
    			</span>
    			<span class="tptn_after_thumb">
    				<a href="" class="tptn_link">
    					<span class="tptn_title">
    						Lorem is Lorem and Ipsum is Ipsum but Lorem is Lorem and Ipsum is Ipsum
    					</span>
    				</a>
    			</span>
    		</li>
    	</ul>
    </div>

＆＃13;

现在，正如您在下图中看到的，我的问题在于span.tptn_after_thumb元素。不知何故，内容溢出span，导致两个<li>项之间存在难看的差距（请参阅下面屏幕截图中的倒数第二个列表项）。我尝试将display: block和display: inline-block添加到其中一个和两个跨度（包含图像的.imagespan和包含该文本的.tptn_after_thumb但是都没有效果。你还建议我做什么？我需要将文本包裹在其span内，以避免图像之间出现任何不规则的垂直间隙。

更新：这是一个屏幕截图，显示了实施LOTUSMS＆＃39;溶液：

Answer 1

受Bootstrap（或任何其他响应式框架）的启发，如果将spans容器内的li除以总宽度为100％，只要是display: inline-block。意味着您吸收span作为容器的所有宽度和高度。这会覆盖span's本机仅内联显示。

在这个示例和我的演示中，我只将此规则添加到相关范围，但理想情况下，您希望将剩余的25％分配给兄弟范围

使用此已编辑

.trending-box > ul > li > span{
    vertical-align:middle;
    display:inline-block;
}
.trending-box > ul > li > span.tptn_after_thumb {
    margin-left: 1em;
    width:75%;
}

请参阅DEMO

无法保留<span>文本

1 个答案: