关于table-row table-cell_html/css_WEB-ITnose-html教學-PHP中文網

咨询热线

回复讨论(解决方案)

首頁

web前端

html教學

关于table-row table-cell_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

最近帮朋友做一个网站，由于没有实际经验，只能是一边做一边学。页面很简单，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="/static/imghw/default1.png"  data-src="./images/header_shuimo.png"  class="lazy"      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="/static/imghw/default1.png"  data-src="./images/src_logo.jpg"  class="lazy"   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 id="咨询热线">咨询热线</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;}

登入後複製

谢谢你花时间耐心看完我的代码。
边框的问题解决了，是自己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没生效的问题，我想还是因为没选对元素

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn