单一< br />不会创建换行符，而是需要两个换行符 [英] Single <br /> doesn't create a line break instead, requires two

问题描述

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

如何使用单个< br /> 在两者之间建立换行符？
Q2。类别和标签之后的井中有很多空白空间。如何删除它？

HTML代码

 < div class =categories><？php the_category（''）; ？>< / div>< br />< br />< div class =tags><？php the_tags（''，''）; ？>< / DIV> 
  

CSS

  .categories {浮动：左; margin-right：3px; margin-bottom：1px;} 
 .categories a {
 background：＃00A1E0; 
颜色：#FFFFFF; 
 display：inline-block; 
 margin-bottom：2px; 
 margin-left：0px; 
 padding：1px 7px; 
 text-decoration：none; 
过渡：全部0.3s缓解0s; 
} 
 .categories a：hover {background：＃666;颜色：#fff;} 
 
 .tags {float：left; margin-right：1％; margin-bottom：4px;} 
 .tags a {
 font-size：70％; 
背景：＃666666; 
颜色：#FFFFFF; 
 display：inline-block; 
 margin-bottom：3px; 
 margin-left：0px; 
 padding：1px 7px; 
 text-decoration：none; 
过渡：全部0.3s缓解0s; 
} 
 .tags a：hover {color：#FFFFFF;} 
  

当我使用单一的< br /> 时，会发生什么情况？
http://i.stack.imgur.com/OIDYt.png （对不起，由于缺乏代表无法发布图片）。

解决方案

尝试删除浮动样式。只能使用display：inline-block。或者使用clear：对div后的第一个标签。

I am working on a Wordpress theme and have been using Bootstrap a bit. I put my article excerpt for the homepage in a well, div class='well'. I have edited the well to have straight corners and have changed the border colour. Except those, there aren't any changes. But, when I try to add a linebreak between categories and tags, it doesn't float to extreme left as in the image below.

Q1. How to use a single <br /> to make a line break between the two? Q2. There's a lot of blank space in the well after the category and tags. How to remove it?

HTML Code

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

When I use single <br />, this is what happens http://i.stack.imgur.com/OIDYt.png (Sorry, can't post images due to lack of rep).

解决方案

Try to remove float style. Use only display: inline-block. Or use clear: both for first tag after div.

这篇关于单一< br />不会创建换行符，而是需要两个换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！