如何將Web表單元素放在新行上？

如何將「輸入」元素放在新行上？在上述例子中所有的元素都順序地放置，即lable->輸入 - > lable->輸入等如何將Web表單元素放在新行上？

/* ----------- My Form ----------- */ 
.myform{ 
    margin:0 auto; 
    padding:14px; 
} 
#stylized{ 
    border-width:1px; 
    border-style:solid; 
    border-color:#b7ddf2; 
    background:#ebf4fb; 
} 
#stylized h1 { 
    font-size:14px; 
    font-weight:bold; 
    margin-bottom:8px; 
    border-width:1px; 
    border-style:solid; 
    border-color:#b7ddf2; 
    padding-bottom:10px; 
} 
#stylized label{ 
    display:block; 
    font-size:11px; 
    font-weight:bold; 
    text-align:right; 
    float:left; 
} 
#stylized input{ 
    float:left; 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
} 
/* --------- End of Form --------- */ 

    <div id="stylized" class="myform"> 
     <form id="form" name="form" method="post" action="index.html"> 
     <h1>Data</h1> 
     <label>Name: </label> 
     <input type="text" name="name" id="name"/> 
     <label>Email: </label> 
     <input type="text" name="email" id="email"/> 
     <label>Password: </label> 
     <input type="text" name="password" id="password"/> 
     </form> 
    </div>

來源

2012-04-27 Klausos Klausos

沒有html很難說，但你有沒有嘗試過'明確：都'？ – Elen 2012-04-27 10:51:58

你沒有訪問標記嗎？ – Lix 2012-04-27 10:53:20

@Elen：的確，我的示例代碼有HTML部分 – 2012-04-27 11:40:30

#stylized input{ 
    display: block; 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
}

這將把每一個輸入放在一個新的線上。 - 刪除「float：left」，添加「display：block」。

來源

2012-04-27 10:55:06 KBN

他必須從標籤中刪除php。 – Leri 2012-04-27 10:56:59

@PLB你在談論什麼PHP標籤？ – Smamatti 2012-04-27 10:59:40

這個問題被標記爲[php]，但問題與php無關 – 2012-04-27 11:19:05

你嘗試過任何事情一樣簡單

<label>Name: </label><br> 
     <input type="text" name="name" id="name"/> 
     <label>Email: </label><br> 
     <input type="text" name="email" id="email"/>

來源

2012-04-27 10:53:27 BugFinder

我不會使用breakline進行佈局。你可以用更好的方式用CSS來做到這一點（顯示）。 – Smamatti 2012-04-27 10:58:16

這裏是JsFiddle爲...

編輯：

#stylized label{ 
    font-size:11px; 
    font-weight:bold; 
    text-align:right; 
} 
#stylized input{ 
    display:block; 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
}

來源

2012-04-27 10:56:11

您防止新的線路選擇具有足夠的空間，所有元素的浮動佈局時。

試試這個：

樣品 http://jsfiddle.net/8yZff/

#stylized label{ 
    font-size:11px; 
    font-weight:bold; 
    text-align:right; 
} 
#stylized input{ 
    font-size:11px; 
    padding:4px 2px; 
    border:solid 1px #aacfe4; 
    width:70px; 
    margin:2px 0 20px 10px; 
    display: block; 
}

來源

2012-04-27 10:56:58 Smamatti

我的猜測是user1359163的anwswer會有所幫助，但是你可能關心知道爲什麼：使用float有效去除元素出該文檔的正常的流程，有點像改變z-index，允許元素流過div邊界，標籤，跨度和...'忽略'樣式。

該元素的行爲就好像它漂浮在其他元素上一樣，所以在這方面，它保持所有其他不會浮動的元素的左側和右側。我不是CSS專家，但這種看着它的方式在解決我在使用float，clear和z-index樣式時遇到的破損佈局方面的幫助非常大。

來源

2012-04-27 11:01:10

對於表格數據（例如標籤/字段對數組），請使用table。你會發現造型更容易，非風格的外觀更好。

來源

2012-04-27 14:17:42

如何將Web表單元素放在新行上？

回答

相關問題