更改使用元素的定位只是CSS

我已經有包裹在div的輸入的Web窗體看起來像這樣更改使用元素的定位只是CSS

Name 
tbFirstName lblFirstName tbLastName lblLastName

這裏是它

<div class="editor-label"> 
    <label>Name:</label> 
</div> 

<div class="editor-field"> 
<span> 
    <input id="LastName" name="LastName" type="text" value="" /> 
    <label for="LastName">Last Name</label> 
</span> 
<span> 
    <input id="FirstName" name="FirstName" type="text" value="" /> 
    <label for="FirstName">First Name</label> 
</span> 
</div>

的HTML標記我想知道關於如何我可以改變輸出看起來像這樣，而不是使用只是css

Name 
tbFirstName tbLastName 
lblFirstName lblLastName

感謝您的任何幫助。

來源

2010-11-19 zSynopsis

.editor-field span {float: left; margin-right: 10px;} // the margin is optional 
.editor-field input {display: block;}

來源

2010-11-19 18:41:51 Tom

感謝那些完美。到底是什麼：display：block「do to the input？」 – zSynopsis 2010-11-19 18:56:58

感謝tick ...「display：block;」將輸入變成塊級元素（增加了自然換行符和其他一些東西）。輸入是默認的內聯元素 – Tom 2010-11-19 18:58:26

Thanks tom。如果我要將標籤元素的位置移動到輸入之前，那麼我只需要將編輯器字段輸入部分更改爲.editor-field span label {display ：block;}或者有什麼我需要做的嗎？ – zSynopsis 2010-11-19 19:47:10

我在輸入前移動了標籤。

.editor-field span {float:left;} 
.editor-field span label {display:block;}

標記

<div class="editor-label"> 
    <label for="Certnum">Name:</label> 
</div> 

<div class="editor-field"> 
<span> 
    <label for="Certnum">Last Name</label> 
    <input id="LastName" name="LastName" type="text" value="" /> 
</span> 
<span> 
    <label for="Certnum">First Name</label> 
    <input id="FirstName" name="FirstName" type="text" value="" /> 
</span> 
</div>

來源

2010-11-19 18:43:51

這似乎不起作用。標籤顯示在輸入頂部而不是底部。 – zSynopsis 2010-11-19 19:54:53

@zSysop - 閱讀我的評論以上的CSS，我移動你的標籤之前的投入，但是，你可以很容易保持你的標記相同的方式和樣式，它使用我寫的CSS，它會正常工作。 – 2010-11-19 20:12:28

更改使用元素的定位只是CSS

回答

相關問題