Maison > Article > interface Web > 关于table-row table-cell_html/css_WEB-ITnose
关于table-row table-cell_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:39:281377parcourir
最近帮朋友做一个网站，由于没有实际经验，只能是一边做一边学。页面很简单，HTML+CSS，最后采用的是在body中用CSS table布局。代码请看下面。
图中红色的部分是两个table-cell，放在一个table-row里面。我困惑的是不能调整单元格的宽度，用border属性根本就没有效果，不知道为什么。请教各位帮我看一下这个问题到底出在哪里。
之前没做过网站，又比较着急，所以代码写的有点乱。各位前辈辛苦一下，帮我看看到底怎么做才能控制列的宽度。先谢谢了！
<!doctype html><html><body> <head> <title> XX典藏官网-第四套人民币收藏网,第三套人民币收藏,第五套人民币,连体钞,纪念钞,人民币最新价格行情表及图片</title> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <meta name="baidu-site-verification" content="f8zIsHw8jjfPFf3L" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content=" 人民币收藏,第四套人民币,第五套人民币,人民币价格,人民币收藏网,人民币收藏价格表,人民币收藏行情,第二套人民币,第四套人民币价格及图片,第三套人民币,第三套人民币价格及图片,第四套人民币大全套,第五套人民币价格表,纪念钞,奥运纪念钞最新价格,金银币价格,连体钞价格及图片"> <link rel="stylesheet" type="text/css" href="css/style_main.css" /> </head> <body> <div id="table_body"> <!--页眉--> <div id="row_shuimo"> <div id="header_shuimo"><img src="./images/header_shuimo.png" style="max-width:90%"/ alt="关于table-row table-cell_html/css_WEB-ITnose" ></div> </div> <div id="row_nav"> <div id="header_logo"> <a href="http://www.baidu.com/" alt="XX文化艺术公司"><img src="./images/src_logo.jpg" alt="XX典藏欢迎您"/></a> </div> <div id="header_reg_login"> <a href="http://www.baidu.com/" title="点击登录">登录 </a> <a href="http://www.baidu.com/" title="点击注册">新用户?注册</a> </div> </div> <!--导航条和商品展示区--> <!--行--> <div id="row_show"> <div id="cell_list"> <ul> <li id="li_nav_all"><strong>全部藏品分类</strong></li> <li id="li_nav_rmb">人民币收藏</li> <li id="li_nav_stamp">邮票收藏</li> <li id="li_nav_jinianbi">纪念币收藏</li> <li id="li_nav_lianti">连体收藏类</li> <li id="li_nav_jinyinbi">金银币类</li> <li id="li_nav_antique">古玩字画</li> </ul> </div> <!-- 行 --> <div id="cell_goods"> <div id="goods_table"> <div id="goods_row1"> <div id="cell_row1"> <ul> <li> 您的当前位置：首页 </li> <li> 藏品展示区 </li> </ul> </div> </div> <div id="goods_row2"> <p>goods </p> </div> </div> </div> </div> <!--页脚--> <div id="row_footer"> <div class="footer_div" id="footer_400"> <h3>咨询热线</h3> <p>400-000-0000</p> </div> <div class="footer_div"> <ul class="footer_ul"> <li>关于我们</li> <li><a href="footer/1.html">XX典藏简介</a></li> <li><a href="footer/1.html">企业文化</a></li> <li><a href="footer/1.html">招商与合作</a></li> </ul> </div> <div class="footer_div"> <ul class="footer_ul"> <li>交易指南</li> <li><a href="footer/1.html">购物流程</a></li> <li><a href="footer/1.html">免责声明</a></li> </ul> </div> <div class="footer_div"> <ul class="footer_ul"> <li>支付配送</li> <li><a href="footer/1.html">支付方式</a></li> <li><a href="footer/1.html">商品配送</a></li> <li><a href="footer/1.html">注意事项</a></li> </ul> </div> </div> </div> </body> </html>
下面是style_main.css:
*{margin:0; padding:0;}/*页眉*/#header #header_nav ul li{ list-style-type:none; float:right; }#table_body{ display:table; margin-left:auto; margin-right:auto;}#table_body #row_shuimo{ display:table-row; height:100px; text-align:center;}#table_body #row_shuimo #header_shuimo{ display:table-cell; }#table_body #row_nav{ display:table-row; vertical-align:top;}#table_body #row_nav #header_logo{ display:table-cell; width:300px;}#table_body #row_nav #header_reg_login{ display:table-cell;}/*展示部分*/#table_body #row_show{ display:table-row; height:700px;}#table_body #row_show #cell_list{ display:table-cell; border:solid,20px,#cc0; border-radius:15px; border-color:green;}#table_body #row_show #cell_goods{ display:table-cell;}#cell_list ul{ list-style-type:none; width:130px; /*color:purple; */ background-color:white; border-style:solid; border-top-left-radius:10px; /*border-color:Red;*/ border-width:2px; padding:0px; /*float:left;*/}#table_body #row_show #cell_list ul li{ height:30px; font-size:15px; color:orange; text-align:center; border-style:solid;}#table_body #row_show #cell_list ul #li_nav_all{ color:Orange; background-color:Green; border-top-left-radius:8px; border-top-right-radius:8px;}/*cell_goods*/#goods_table{ display:table; height:inherit;}#goods_row1{ display:table-row;}#goods_row2{ display:table-row;}#cell_row1{ display:table-cell; margin-left:0;}/*页脚部分*/ #row_footer{ display:table-row;} .footer_div{ display:table-cell; width:20%; height:100px; float:left;} #row_footer #footer_400{ margin-left:150px;} .footer_ul{ list-style-type:none; margin-left:10px;}
回复讨论(解决方案)
只是调整宽度的话简单，
#cell_list ul{ width: 500px;} 至于border，我用的chrom浏览器，有显示。
几个建议：1、div不要放到span标签中， 标签被用来组合文档中的行内元素，一般都是文字；
2、页面中不要频繁使用id属性，一方面不利于代码重用，另一方面容易命名冲突，脚本出错。
只是调整宽度的话简单，
#cell_list ul{ width: 500px;} 至于border，我用的chrom浏览器，有显示。
几个建议：1、div不要放到span标签中， 标签被用来组合文档中的行内元素，一般都是文字；
2、页面中不要频繁使用id属性，一方面不利于代码重用，另一方面容易命名冲突，脚本出错。
谢谢你花时间耐心看完我的代码。
边框的问题解决了，是自己CSS语法错误导致无法显示出来。唉！但是宽度问题依旧没有解决。
麻烦你先看下面这张图。1和2是一行，3和4 是一行，5和6又是一行。HTML代码没有改变，但是我在CSS里面无论设置table、row和cell的width属性，都没有任何作用。不知道为什么。下面贴上图片和CSS代码：
*{margin:0; padding:0;}/*页眉*/#table_body{ display:table; margin-left:auto; margin-right:auto;}#row_shuimo{ display:table-row; height:100px;}#header_shuimo{ display:table-cell; border:solid; width:200px;}#header_test{display:table-cell;border:solid;}#table_body #row_nav{ display:table-row; width:300px;}#table_body #row_nav #header_logo{ display:table-cell; border:solid 5px red; margin-right:300px; }#table_body #row_nav #header_reg_login{ display:table-cell;}/*展示部分*/#table_body #row_show{ display:table-row; height:700px;}#table_body #row_show #cell_list{ display:table-cell; border-radius:15px; border-color:green; border:solid;}#table_body #row_show #cell_goods{ display:table-cell; border:solid;}#cell_list ul{ list-style-type:none; width:130px; /*color:purple; */ background-color:white; border-style:solid; border-top-left-radius:10px; /*border-color:Red;*/ border-width:2px; padding:0px; /*float:left;*/}#table_body #row_show #cell_list ul li{ height:30px; font-size:15px; color:orange; text-align:center; border-style:solid;}#table_body #row_show #cell_list ul #li_nav_all{ color:Orange; background-color:Green; border-top-left-radius:8px; border-top-right-radius:8px;}/*cell_goods*/#goods_table{ display:table; height:inherit; border:solid;}#goods_row1{ display:table-row;}#goods_row2{ display:table-row;}#cell_row1{ display:table-cell; margin-left:0;}/*页脚部分*/ #row_footer{ display:table-row;} .footer_div{ display:table-cell; width:20%; height:100px; float:left;} #row_footer #footer_400{ margin-left:150px;} .footer_ul{ list-style-type:none; margin-left:10px;} HTML里又加了一个table-cell,CSS中的id是header_test
浏览器中按F12可以查看元素，查看下你要改的那个元素的id，然后改css就行了，至于width没生效的问题，我想还是因为没选对元素
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：CSS3响应式滑动菜单_html/css_WEB-ITnoseArticle suivant：HTML5拖拽功能drag_html/css_WEB-ITnose