单个 不会创建换行符，而是需要两个答案

【问题标题】：Single doesn't create a line break instead, requires two单个 不会创建换行符，而是需要两个
【发布时间】：2015-07-20 02:14:27
【问题描述】：

我正在开发一个 Wordpress 主题，并且一直在使用 Bootstrap。我把我的文章摘录放到了一个井里，div class='well'。我已将井编辑为直角并更改了边框颜色。除了这些，没有任何变化。但是，当我尝试在类别和标签之间添加换行符时，它不会像下图那样浮动到极左。

第一季度。如何使用单个  在两者之间进行换行？ Q2。在类别和标签之后的井中有很多空白空间。怎么去掉？

HTML 代码

<div class="categories"><?php the_category(' '); ?></div><br /><br /><div class="tags"><?php the_tags('',' '); ?></div>

CSS

.categories{float:left; margin-right:3px;margin-bottom: 1px;}
.categories a {
background: #00A1E0;
color: #FFFFFF;
display: inline-block;
margin-bottom: 2px;
margin-left: 0px;
padding: 1px 7px;
text-decoration: none;
transition: all 0.3s ease 0s;
} 
.categories a:hover{background:  #666; color:#fff;}

.tags{float:left; margin-right:1%;margin-bottom:4px;}
.tags a {
font-size:70%;
background:#666666;
color: #FFFFFF;
display: inline-block;
margin-bottom: 3px;
margin-left: 0px;
padding: 1px 7px;
text-decoration: none;
transition: all 0.3s ease 0s;
} 
.tags a:hover{color:#FFFFFF;}

当我使用单个   时，会发生这种情况 http://i.stack.imgur.com/OIDYt.png（抱歉，由于缺少代表，无法发布图片）。

【问题讨论】：

老实说，你不应该使用br 作为元素间距...这就是边距/填充的用途。

标签： html css wordpress twitter-bootstrap

【解决方案1】：

尝试删除浮动样式。仅使用 display: inline-block。或者使用 clear: both 作为 div 之后的第一个标签。

【讨论】：

当我这样做时，标签确实会下降。但是，这就是在桌面上发生的情况 - 编辑按钮也会下降 -i.imgur.com/AJhGMb7.png 这只会创建更多的空白区域，我将在这些空白区域下方尝试删除。
对类别和标签使用两个块容器 (div)。所以他们将只是一个低于另一个。放置这些容器内联块元素
我添加了 float 样式并添加了 clea 而不是 clear:both。现在，它几乎固定了，除了下面形成的空白。