1. 首頁
  2. 問答
  3. 表...對齊單元格和輸入框

表...對齊單元格和輸入框

2010-02-03 130 views
0

我在我的HTML文檔的<form>標記內創建了3個嵌套表格中的1個。我插入輸入字段以在文本右側創建文本框。這一切都成爲我唯一的問題是，以下單元格：「名字，姓氏，地址，城市，州，郵政編碼和縣」不是直接相互排列，以保持單元格對齊和文本盒子對齊。我如何對齊每個部分？如果不是，請希望我解釋清楚，請進一步澄清。任何關於這個小問題的幫助將不勝感激。表...對齊單元格和輸入框

這裏是我到目前爲止的代碼，所以你可以看到我做了什麼：

<?xml version="1.0" encoding="UTF-8" standalone="no" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<head> 
<img src="j0182695_downsized.jpg" alt="Oatmeal Raisin cookies" style="float: left" > 

</head> 


<body background="back-225.gif"> 
<h1 style="text-align: center; color: red; font-family: Arial, Helvetica, sans-serif;">Cookies</h1> 

<table width="500" border="0"> 
    <tr> 
     <td align="center"><a href="about.htm">About Us</a></td> 
     <td align="center"><a href="mailto:[email protected]">Contact Us</a></td> 
     <td align="center"><a href="orderform.htm">Place an Order</a></td> 
     <td align="center"><a href="recipe.htm">Sample Recipe</a></td> 
    </tr> 
</table> 

<form name="Web Order Form" id="Web Order Form"> 
<table border="0" cellpadding="2" width="65%"> 
    <tr> 
     <td>Personal Information</td> 
    </tr> 
    <tr> 
     <td>First Name: 
     <input name="fname" id="fname" size="30" type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td>Last Name: 
     <input name="lname" id="lname" size="30" type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td>Address: 
     <input name="address" id="address" size="30" type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td>City: 
     <input name="city" id="city" size="35" type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td>State: 
     <input name="state" id="state" size="3" type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td>Zip Code: 
     <input name="zip" id="zip" size="10" type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td>Country: 
     <input name="country" id="country" size="10" type="text" /> 
     </td> 
    </tr> 
</table> 
</form>

來源

2010-02-03 Ashley

+0

這不是編程相關的。這個問題可能更適合http://doctype.com/ – ChrisInEdmonton 2010-02-03 18:57:00

+0

@ChrisInEdmonton：抱歉，我認爲這是因爲它處理HTML。我會檢查你提到的網站。謝謝你讓我知道。 – Ashley 2010-02-03 19:16:36

+0

我希望你喜歡Doctype！ – ChrisInEdmonton 2010-02-03 20:03:07

回答

4

只要把輸入框在另一個單元格是這樣的：

<tr> 
    <td>First Name:</td> 
    <td><input name="fname" id="fname" size="30" type="text" /></td> 
</tr>

如果你把所有的行一樣， ，那麼標籤和輸入框將排隊。

來源

2010-02-03 18:55:30

+0

@Tatu Ulmanen：我試過這個，它使得標籤和文本框分別排列，這正是我想要做的 - 所以謝謝！但是現在它們之間有很多空間？我嘗試調整窗口大小，我認爲這是因爲我的屏幕很寬，所以我認爲它會根據觀看者屏幕的大小自行更正。你怎麼看？ – Ashley 2010-02-03 19:12:35

+1

@Ashley，默認情況下，表格的寬度爲100％，所以表格從左邊緣延伸到窗口的右邊緣。而瀏覽器通常將細胞分割爲50/50，這就是爲什麼有很大的差距。將'width：auto;'設置爲表格，以便只佔用必要的空間。您可以將'padding'添加到表格單元格以微調差距。 – 2010-02-03 19:27:07

+0

感謝您的幫助。不幸的是，我不得不將它設置爲65％，所以它必須像我想的那樣去做。不管怎麼說，還是要謝謝你。 – Ashley 2010-02-03 20:04:52

0

只要把input s轉換td是他們自己的：

<tr> 
    <td>First Name:</td> 
    <td><input name="fname" id="fname" size="30" type="text" /></td> 
</tr> 
<tr> 
    <td>Last Name:</td> 
    <td><input name="lname" id="lname" size="30" type="text" /></td> 
</tr> 
<tr> 
    <td>Address:</td> 
    <td><input name="address" id="address" size="30" type="text" /></td> 
</tr>

等。

來源

2010-02-03 18:58:13

+0

@RegDwight：謝謝！ – Ashley 2010-02-03 19:14:09

1

以下是將內容與演示文稿分開的示例。在頁面上有兩個主要組件：一個導航​​菜單（這是一個鏈接列表）和一個聯繫表單（它由一系列表單元素組成）。 HTML自立，即使沒有任何樣式也能合理顯示。

首先，使用Yahoo!'s reset stylesheet重置樣式，以確保起始點相同，無論瀏覽器特定的默認值如何。然後，應用特定樣式，直到結果顯示合理匹配要求。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link id="screen-reset" rel="stylesheet" type="text/css" media="screen" 
href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"> 
<style type="text/css"> 
    html { background:#eef; font-size:18px;} 
    body { background:#eee; margin:0 auto; width:95%;} 
    #main { clear:both; } 
    #hmenu { background:#fed; height:2em } 
    #hmenu li { 
     background:#fed; 
     display:block; 
     float:left; 
     padding:0 4px; 
     border-left:solid 4px #dcb; 
    } 
    #hmenu a { 
     display:block; 
     font-family:sans-serif; 
     font-size:1.5em; 
     font-weight:bold; 
     line-height:1.3333; 
     text-decoration:none; 
    } 
    form { padding:1em 0; } 
    fieldset { 
     background:#fff; 
     border:solid 1px #222; 
     padding:0.5em 0; 
     margin:0 auto; 
     width:90%; 
    } 
    legend { 
     background:#eee; 
     padding:0.1667em; 
    } 
    form li { 
     clear:both; 
     display:block; 
     padding:1em 0; 
    } 
    form li label { 
     display:block; 
     float:left; 
     font-family:sans-serif; 
     font-weight:bold; 
     padding:0 0.25em 0 0; 
     text-align:right; 
     width:35%; 
    } 
    form li input[type="text"] { 
     display:block; 
     float:left; 
    } 
    form input[type="submit"] { 
     margin:0 0 0 35%; 
    } 
</style> 

<title>Contact Form</title> 

</head> 

<body> 

<div id="hmenu"> 
<ul> 
<li><a href="about.htm">About Us</a></li> 
<li><a href="mailto:[email protected]">Contact Us</a></li> 
<li><a href="orderform.htm">Place an Order</a></li> 
<li><a href="recipe.htm">Sample Recipe</a></li> 
</ul> 
</div> 

<div id="main"> 
<form name="web-order-form" id="web-order-form"> 
    <fieldset> 
     <legend>Personal Information</legend> 
     <ul> 

      <li><label for="fname">First Name: </label> 
      <input name="fname" id="fname" size="30" type="text"></li> 

      <li><label for="lname">Last Name: </label> 
      <input name="lname" id="lname" size="30" type="text"></li> 

      <li><label for="address">Address: </label> 
      <input name="address" id="address" size="30" 
      type="text"></li> 

      <li><label for="city">City: </label> 
      <input name="city" id="city" size="35" type="text"></li> 

      <li><label for="state">State: </label> 
      <input name="state" id="state" size="3" type="text"></li> 

      <li><label for="zip">Zip Code: </label> 
      <input name="zip" id="zip" size="10" type="text"></li> 

      <li><label for="country">Country: </label> 
      <input name="country" id="country" size="10" 
      type="text"></li> 

      <li><input type="submit" name="submit-order" id="submit-order" 
      value="Place Order"></li> 
     </ul> 
    </fieldset> 
</form> 
</div> 
</body> 
</html>

來源

2010-02-03 22:02:29

相關問題

 相關問題