線對齊，HTML，CSS JAVASCRIPT

我正在使用eclipse製作Android手機的應用程序，我希望能夠在一行中包含標籤和文本字段，或者在一行中包含標籤和複選框。我爲此使用了以下代碼，但它不起作用。你也應該知道我正在使用jquery-mobile平臺，並在android手機上測試這些代碼。線對齊，HTML，CSS JAVASCRIPT

因此，任何幫助將不勝感激！

<p class="label_field_pair"> 
    <label for="foo">Foo:</label> 
    <input type="text" id="foo" /> 
</p>

和下面的CSS：

p.label_field_pair { 

    clear: both; 

    float: none; 

} 

p.label_field_pair label { 

    clear: left; 

    display: block; 

    float: left; 

    text-align: right; 

    width: 100px; 

} 

p.label_field_pair input { 

    clear: right; 

    float: left; 

    margin-left: 10px; 

    width: 200px; 

}

來源

2011-07-28 S. N

我假設這個問題只發生在移動設備上？ – kinakuta

我只在android設備上測試過。 –

什麼，具體來說，你是說當你說它不起作用？雖然我在這，Android設備的屏幕寬度是多少？ – kinakuta

儘量避免浮動時即可。 inline-block的實現在瀏覽器中是相當不錯的，特別是如果你爲老版本的FF包含-moz hack。但是，我不知道它是否在您的移動瀏覽器中表現出來......是嗎？

HTML

<p class="label_field_pair"> 
    <label for='foo'>Foo: </label> 
    <input type="text" id="foo" /> 
</p>

CSS

p.label_field_pair { display:block; } 
p.label_field_pair label { display: -moz-inline-block; display:inline-block; width:100px; } 
p.label_field_pair input { display: -moz-inline-block; display:inline-block; width:200px; }

來源

2011-07-28 11:13:05 sqwk

嘿謝謝他的工作！ –

你甚至不需要使用'inline-block'。標籤和輸入元素默認爲內聯，所以當您根本不應用任何樣式時，它們將自動在一行上。 – RoToRa

Ouch，true ...在這種情況下，您也可以像這樣編寫HTML代碼，以擺脫for屬性。 – sqwk

線對齊，HTML，CSS JAVASCRIPT

回答

相關問題