對齊表格下對方HTML/CSS

對於學校我正在做一個小網站，讓孩子們學習計算。我讓php創建了10個隨機數，並將它們放置在彼此下面的單獨分區中。每個部門都包含一個表格。但是因爲文本（和）的長度都不相同，所以這些形式不會直接對齊。對齊表格下對方HTML/CSS

這是創建和的腳本：

<html> 
<head> 
<title>Rekenen</title> 
</head> 

<body> 
<h2>Delen - Toets</h2> 
<div class="textboxlarge"> 
<form name="form1" method="post" action="index.php?pagina=28"> 
<?php session_start(); 

for($teller=1;$teller<11;$teller++){ 

$numberone = rand(5, 150); 
$numbertwo = rand(5, 150); 
$getal1[$teller]=$numberone; 
$getal2[$teller]=$numbertwo; 
$_SESSION['getal1']=$getal1; 
$_SESSION['getal2']=$getal2; 

echo "<div class='som'>$numberone : $numbertwo = <input name='$teller' ></div><br>"; 

} 
    ?> 
<input type="submit" name="submit" value="verzenden"> 
<input type="reset" name="reset" value="reset"> 
</form> 
</div> 

</body> 
</html>

在網站上，它看起來就像這樣： http://gyazo.com/52686785c5beb0e1e97f8b8682c200fb

現在我qeustion是，什麼是對準空白表格的最佳方式？（對不起，我英語不好，我不是英語母語的人，但是我盡力了）

來源

2014-02-25 Chielarts

請爲擡頭提供了一個有效的鏈接屏幕 – DonJuwe

三江源，它現在應該工作 – Chielarts

您的示例鏈接不起作用;並且您顯示的腳本不會創建10個單獨的_forms_，而是會創建一個帶有多個帶有輸入字段的「div」的表單。至於對齊方式，請將數字放在單獨的HTML元素中，並使這些元素的寬度足以容納最大的數字。浮動或'display：inline-block'可能需要實現這一點。如果這些技術對你來說並不意味着什麼，那麼請先閱讀一些關於使用CSS進行佈局的基礎知識的教程。 – CBroe

爲什麼你不使用表格？

事情是這樣的：

<table> 

<?php session_start(); 

for($teller=1;$teller<11;$teller++){ 

$numberone = rand(5, 150); 
$numbertwo = rand(5, 150); 
$getal1[$teller]=$numberone; 
$getal2[$teller]=$numbertwo; 
$_SESSION['getal1']=$getal1; 
$_SESSION['getal2']=$getal2; 

echo "<tr class='som'><td>$numberone : $numbertwo =</td><td> <input name='$teller'></td></tr>"; 

} 
?> 
</table>

，你可能會有更改CSS一點來實現相同的外觀。

來源

2014-02-25 12:49:12

如果你知道你的號碼的大小，適用span爲了你們的專區內的人數和他們的風格，像這樣：

http://jsfiddle.net/7YF5q/

來源

2014-02-25 12:50:32 DonJuwe

對齊表格下對方HTML/CSS

回答

相關問題