Question

你在这里遇到一些问题，试图将图像和文字从左到右堆叠在同一条线上。

<div style="position: absolute; top: 200px; left: 30px;">
    <span style="float: left;">
        <img class="tglbtn" src="img/toggle_tab_l.png" data-swap='img/toggle_tab_r.png' height="60%" width="60%">
    </span>
    <p style="float: right; font-size: 20px; color: #92d6f8; overflow: hidden; text-align: left">
        Remember User ID?
    </p>
</div>

Answer 1

您的密码 http://jsfiddle.net/21Ltsbeb/ 改进 http://jsfiddle.net/21Ltsbeb/1/

我没有看到这个问题？但是，您可能最好使用display：带有匹配html元素的inline-block。内联如同

＆＃13;

.tglbtn {width:60%;height:60%;}
span {display:inline-block;}
p {font-size:20px;color:#92d6f8;overflow:hidden;text-align:left;}

＆＃13;

<div>
    <span>
        <img class="tglbtn" src="http://www.placehold.it/66x66">
    </span>
    <span>
    Remember User ID?
    </span>
</div>

＆＃13;

修改

我应该注意一些事情，你需要作为初学者来解决。

不要使用内联css
不要使用像素（rem，em或％）
避免使用绝对位置
不要使用花车
请记住，优秀的Web应用程序在结构上具有很大的连续性。

在你掌握CSS之前，我可能会推荐使用Foundation的CSS或Bootstrap CSS。

Answer 2

可以为您清理很多，还可以简化您的CSS /删除大量的内联样式：

＆＃13;

.mind{
  display:inline-block;
  vertical-align:top;
  }
.tglbtn{
  height:20px;
  }

＆＃13;

<div class="wrap">
  <img class="tglbtn" src="http://placekitten.com/g/200/300" data-swap='img/toggle_tab_r.png' />
  <div class="mind">Remember User ID?</div>
</div>

＆＃13;

Answer 3

将段落上边距设为0

margin-top:0;

它是由浏览器默认设置的（否则我看到Chrome中的错误对齐）。

请参阅此固定Example

在同一行上从左到右堆叠图像和文本

3 个答案:

修改