CSS-用Divs替換HTML表

好吧，我試圖接受這樣的想法，即不應(yīng)使用html表，而應(yīng)使用div。 但是，我經(jīng)常有類似于以下內(nèi)容的代碼

First Name:
Last Name:
Address:	NY CA	USA CAN

我希望標(biāo)簽對(duì)齊并且我希望控件對(duì)齊。 不使用表格怎么辦？

6個(gè)解決方案

43 votes

這應(yīng)該可以解決問(wèn)題。

div.block{

overflow:hidden;

}

div.block label{

width:160px;

display:block;

float:left;

text-align:left;

}

div.block .input{

margin-left:4px;

float:left;

}

First field

Second field

希望您能理解。

partoa answered 2019-11-18T16:41:58Z

25 votes

請(qǐng)注意，盡管不建議將表格作為頁(yè)面布局的主要手段，但它們?nèi)匀挥凶约旱奈恢谩?在適當(dāng)?shù)臅r(shí)間和地點(diǎn)，并且可以使用表，直到某些更流行的瀏覽器(ahem，IE，ahem)變得更符合標(biāo)準(zhǔn)為止，表有時(shí)是解決方案的最佳途徑。

KOGI answered 2019-11-18T16:42:22Z

10 votes

我到處尋找一個(gè)簡(jiǎn)單的解決方案，發(fā)現(xiàn)這段代碼對(duì)我有用。 right div是我出于可讀性考慮而保留的第三列。

這是HTML：

PHONE & FAX:

+43 99 554 28 53

Cellphone Gert:

+43 99 302 52 32

Cellphone Petra:

+43 99 739 38 84

和CSS：

.container {

display: table;

}

.row {

display: table-row;

}

.left, .right, .middle {

display: table-cell;

padding-right: 25px;

}

.left p, .right p, .middle p {

margin: 1px 1px;

}

Wavesailor answered 2019-11-18T16:42:54Z

4 votes

您可以創(chuàng)建簡(jiǎn)單的基于浮點(diǎn)的表單，而不必丟失液體布局。 例如：

.row { clear: left; padding: 6px; }

.row label { float: left; width: 10em; }

.row .field { display: block; margin-left: 10em; }

.row .field input, .row .field select {

width: 100%;

box-sizing: border-box;

-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box;

}

First name

State

NY

但是，當(dāng)您使用復(fù)雜的表單布局(其中有多個(gè)固定寬度和可變寬度的列的網(wǎng)格)時(shí)，這確實(shí)會(huì)崩潰。 在這一點(diǎn)上，您必須決定是否堅(jiān)持使用divs并放棄液體布局，而只是將所有內(nèi)容放到固定的像素位置，還是讓表格來(lái)做。

就我個(gè)人而言，液體布局比用于布局表格的確切元素更重要的是可用性功能，因此我通常會(huì)使用表格。

bobince answered 2019-11-18T16:43:36Z

1 votes

基本上可以歸結(jié)為使用固定寬度的頁(yè)面并為這些標(biāo)簽和控件設(shè)置寬度。 這是實(shí)現(xiàn)無(wú)表布局的最常見(jiàn)方法。

設(shè)置寬度有很多方法。 Blueprint.css是一個(gè)非常受歡迎的CSS框架，可以幫助您設(shè)置列/寬度。

Ken Browning answered 2019-11-18T16:44:09Z

1 votes

為此有一個(gè)非常有用的在線工具，只需將表自動(dòng)轉(zhuǎn)換為div：

[http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/]

以及解釋該視頻的視頻：[https://www.youtube.com/watch?v=R1ArAee6wEQ]

我每天都在使用它。 希望對(duì)您有所幫助；)

Kaszoni Ferencz answered 2019-11-18T16:44:53Z

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的HTML可以替代CSS的所有功能,CSS-用Divs替换HTML表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。