HTML可以替代CSS的所有功能,CSS-用Divs替换HTML表
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)題。
- 上一篇: js父元素获取子元素img_css,前端
- 下一篇: 切割 字符串_web前端如何使用字符串