將圖片和文字從左到右堆疊在同一行上

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：inline-block與匹配的html元素一起使用。 內聯為與將這些元素放在同一行中

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

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

編輯

我需要注意的幾件事是，您需要作為初學者解決。

• 不要使用內聯CSS
• 不要使用像素（rem，em或％）
• 避免使用絕對位置
• 不要使用浮點數
• 請記住，好的Web應用程序在結構上具有很大的連續性。

在掌握CSS之前，我可能會推薦Foundation的CSS或Bootstrap CSS。

Answer 2

可以為您進行很多清理工作，還可以簡化CSS或刪除很多內聯樣式：

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

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

Answer 3

將段落的上邊距設置為0

margin-top:0;

否則，它是由瀏覽器默認設置的（我在chrome中看到未對准）。

看到這個固定的例子