html - 并排放置两个内联 div

Question

我试图将标签和类别放在一行中，但是无论我做什么，它都不会发生。两个 div 都是内联 block ，但它们不是一行。这是 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 {
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;}

HTML

<div class="categories"><?php the_category(' '); ?></div>

无论如何，这是它在我的浏览器上显示的方式:-

但是，这就是我想要的样子:-

Answer 1

float: left;

将它添加到两个 div 中，以防宽度超过 px 时使用 %(百分比)调整大小