控制表格單元格內文本輸入和複選框的佈局

我有一些HTML並排顯示文本輸入和2個複選框。 HTML由工具生成，所以我不能改變HTML的構建方式，我只能使用CSS將樣式應用於它。我簡單的HTML和CSS是：控制表格單元格內文本輸入和複選框的佈局

<html> 
<head> 
    <style type="text/css"> 
    td { 
    padding: 0; 
    } 
    fieldset { 
    display: inline; 
    padding: 0; 
    margin: 0 
    } 
    input[type="text"] { 
    margin: 0; 
    padding: 0; 
    } 
    table.checkboxs { 
    border-collapse:collapse; 
    } 
    table.checkboxs td { 
    border: none; 
    margin: 0; 
    padding: 0; 
    } 
</style> 
</head> 
<body> 
    <input type="text" id="item1" value="" /> 
    <fieldset> 
     <table summary="" class="checkboxs" border-collapse=""> 
     <tr> 
     <td><input type="checkbox" id="chkbox_0" name="chkbox" value="1" /><label for="chkbox_0">One</label></td> 
     <td><input type="checkbox" id="chkbox_1" name="chkbox" value="2" /><label for="chkbox_1">Two</label></td> 
     </tr> 
     </table> 
    </fieldset> 
</body> 
</html>

這與複選框最終顯示了比這樣的文本項高：

Screenshot 1

我想什麼是他們排列在一起，就像這樣：

Screenshot 2

這看起來很簡單，但我不能想出如何實現它。如果您刪除了文本輸入或字段集，那麼剩餘的元素將佔用最小的垂直空間，只有當它們在一起時，文本輸入纔會被推下頁面。

通過一切手段指出HTML中的任何缺點，但正如我所說，這實際上不在我的控制之下，我只能使用CSS來影響佈局。

來源

2012-08-02 Tony Andrews

在所有文本框或字段集上使用'position：relative'和'top：[某些數字，可以是負數] px' – Detect 2012-08-02 16:15:35

有兩個快速解決方案，我能想到的。首先是獲得該表通過設置來表現和調整更像是普通的文字：

table.checkboxs { 
    display:inline-block; 
    vertical-align:middle; 
}

JSFiddle example

或者通過對齊文本框的行爲更像表：

input[type="text"] { 
    vertical-align:top; 
}

JSFiddle example

來源

2012-08-02 16:27:58

@Chris：Thanks，t帽子工作！（我只需要添加一個！DOCTYPE到我的HTML演示文件，使其在IE8中工作） – 2012-08-02 16:58:58

嘗試賦予浮點數：給他們兩個，輸入和字段集，然後使用margin-top，如果需要實現你想要的。

來源

2012-08-02 16:11:02

嘗試

input { 
display: inline-block; 
} 

fieldset { 
display: inline; 
padding: 0; 
margin: 0 
}

來源

2012-08-02 16:20:41 voodoo417

控制表格單元格內文本輸入和複選框的佈局

回答

相關問題