如何獲得輸入 - 在同一行上的強和p元素？

我有以下的html內容。如何獲得輸入 - 在同一行上的強和p元素？

 <div><input type="checkbox"><strong></strong><p></p></div>

如何將這些元素與p元素在同一行上進行無包裝？

我嘗試這樣做：

input 
{ 
    float: left; 
    margin: 0; 
    padding: 0; 
} 

strong 
{ 
    float: left; 
    margin: 0; 
    padding: 0; 
} 
p 
{ 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
}

我不明白這個CSS設置什麼是p元素佔據的div元素的整個寬度。例如，div寬度爲1360，p元素也爲1360，但寬度爲184，輸入寬度爲16，並且它們全都與p元素在水平線上溢出的同一條線上。

來源

2013-02-08 Yetimwork Beyene

你忘了加html內容問題 – abc667 2013-02-08 15:57:31

修復溢出值爲左值並將html內容右移4個空格後問題仍然存在。 – 2013-02-08 16:01:19

後你給<p>一個float:left;，你必須給<div>一個overflow:hidden;。

如果您想稍微降低<input>，請給它一個margin-top。

檢查這個DEMO。

CSS

div 
{ 
    overflow:hidden; 
} 
input 
{ 
    float: left; 
    margin: 0; 
    padding: 0; 
} 

strong 
{ 
    float: left; 
    margin: 0; 
    padding: 0; 
} 
p 
{ 
    margin: 0; 
    padding: 0; 
    float:left; 
    white-space: nowrap; 
}

之所以<p>採用全寬，這是因爲<p>的display屬性block，就像<div>，除非你浮起來將採取全寬。

來源

2013-02-08 16:08:31

float：overflow;不存在，只能向左或向右。

來源

2013-02-08 15:58:05

您需要將p向左浮動。浮動一切離開將捕捉他們都在同一行（只要定位是相對的，你應該做的一樣好）

p{ 
float: left; 
position: relative; 
margin: 0; 
padding: 0;}

來源

2013-02-08 16:06:41 Landon

總是使用顯示：內聯投入要素上線：

HTML：

<div> 
    <input type="checkbox" /> 
    <strong>Hello</strong> 
    <p>World</p> 
</div>

CSS：

input{ 
    float: overflow; 
    margin: 0; 
    padding: 0; 
} 

strong 
{ 
    float: overflow; 
    margin: 0; 
    padding: 0; 
} 
p 
{ 
    display:inline; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
}

http://jsfiddle.net/bpze6/1/

來源

2013-02-08 16:08:50 Ramin

如何獲得輸入 - 在同一行上的強和p元素？

回答

相關問題