試圖創建表格佈局將無法與CSS工作

我想重新創建一種聯繫表格的表格佈局。試圖創建表格佈局將無法與CSS工作

下面是目前的形式：http://www.radonsystems.net/contact-us

，這是什麼工作正在進行就像

http://www.radonsystems.net/newsite/?do=contact-us

正如你可以看到，有一個與第二個形式問題 - 我只是不知道如何解決它。

關於我在做什麼錯的任何想法？

該部分的樣式（CSS）幾乎100％被複制過，只是我更改了字體，但保留在同一族中。

來源

2010-05-20 bear

您可能想要修復按鈕，因爲我的1680X1050屏幕上的頁面跨越整個屏幕，使其移動到窗體的右側。我認爲它與''contact-input''上的'width：70％'有關。我會看看我能否爲你找到解決方案。 – 2010-05-20 17:06:07

試用float: left;而不是float: right;在您的contact-input我的測試將其正確對齊。

.contact-input 
{ 
    border:1px dashed black; 
    display:table-cell; 
    float:right; 
    width:70%; 
}

前後

.contact-input 
{ 
    border:1px dashed black; 
    display:table-cell; 
    float:left; 
    width:70%; 
}

來源

2010-05-20 16:56:14

OK - 您遇到的主要問題是，有沒有HTML元素分組您的投入和標籤一起（以同樣的方式，該表將表格單元排在一起）。如果你添加一個分組元素，這將會很大程度上解決你的佈局問題。

一個很好的方式來提供HTML這種結構是使用一個無序列表（爲形式，語義的詳細信息列表，用戶需要提供分組的結構可以去像：

<ul class="formStructure"> 
    <li> 
     <label for="field1">Field 1:</label> 
     <input type="text" id="field1" name="field1"/> 
    </li> 
    <li> 
     <label for="field1">Field 1:</label> 
     <input type="text" id="field1" name="field1"/> 
    </li> 
</ul>

這將在語義上和視覺上將標籤及其字段保存在一起。您需要添加CSS來關閉列表樣式（因此您看不到子彈），設置標籤的寬度和邊距等。

此外，您可以在佈置表單時改進HTML練習。您錯過了<fieldset>和<legend>是好的（和有效的）HTML表單的一部分的元素。

來源

2010-05-20 17:00:46 Beejamin

試圖創建表格佈局將無法與CSS工作

回答

相關問題