在容器div中并排浮动2个元素 [英] Float 2 elements side by side inside a container div

问题描述

这应该是一件容易的事，但是我在过去30分钟里一直在研究它，无法弄清.

This is supposed to be an easy task, but I've been looking at it for the last 30 minutes and couldn't figure it out.

这是html代码；

<div style="width: 250px;">
  <img style="float: left; width: 20px;" src="public/_images/ok_kutu.jpg" alt="kutu" /> 
  <h3 style="float: left; width: 50px; color: #FFF; font-size: 18px;">Jobs</h3>
  <div style="clear: left;"></div>
</div>

我想要的是并排保留img和h3项. 取而代之的是我得到这个；

All i want is keeping the img and h3 items side by side. Instead I'm getting this;

推荐答案

默认情况下，<h3>元素具有上下边界.您应该使用margin: 0删除它们:

By default, <h3> elements have a top and bottom margin. You should remove them using margin: 0:

<div style="width: 250px;">
    <img style="float: left; width: 20px;" src="public/_images/ok_kutu.jpg" alt="kutu" /> 
    <h3 style="float: left; width: 50px; color: #FFF; font-size: 18px;margin:0">Jobs</h3>
    <div style="clear: left;"></div>
</div>

此外，也许要考虑使用外部CSS，而不是将所有样式信息都内联.从长远来看，维护起来会容易得多...

Also, maybe look into using external CSS, rather than placing all of your style information inline. It will be much easier to maintain in the long run...

请参见此 jsFiddle演示

这篇关于在容器div中并排浮动2个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！