关于table-row table-cell_html/css_WEB-ITnose
程序员文章站
2022-05-04 09:48:28
...
最近帮朋友做一个网站,由于没有实际经验,只能是一边做一边学。页面很简单,HTML+CSS,最后采用的是在body中用CSS table布局。代码请看下面。
图中红色的部分是两个table-cell,放在一个table-row里面。我困惑的是不能调整单元格的宽度,用border属性根本就没有效果,不知道为什么。请教各位帮我看一下这个问题到底出在哪里。
之前没做过网站,又比较着急,所以代码写的有点乱。各位前辈辛苦一下,帮我看看到底怎么做才能控制列的宽度。先谢谢了!
下面是style_main.css:
至于border,我用的chrom浏览器,有显示。
几个建议:1、div不要放到span标签中, 标签被用来组合文档中的行内元素,一般都是文字;
2、页面中不要频繁使用id属性,一方面不利于代码重用,另一方面容易命名冲突,脚本出错。
至于border,我用的chrom浏览器,有显示。
几个建议:1、div不要放到span标签中, 标签被用来组合文档中的行内元素,一般都是文字;
2、页面中不要频繁使用id属性,一方面不利于代码重用,另一方面容易命名冲突,脚本出错。
谢谢你花时间耐心看完我的代码。
边框的问题解决了,是自己CSS语法错误导致无法显示出来。唉!但是宽度问题依旧没有解决。
麻烦你先看下面这张图。1和2是一行,3和4 是一行,5和6又是一行。HTML代码没有改变,但是我在CSS里面无论设置table、row和cell的width属性,都没有任何作用。不知道为什么。下面贴上图片和CSS代码:
图中红色的部分是两个table-cell,放在一个table-row里面。我困惑的是不能调整单元格的宽度,用border属性根本就没有效果,不知道为什么。请教各位帮我看一下这个问题到底出在哪里。
之前没做过网站,又比较着急,所以代码写的有点乱。各位前辈辛苦一下,帮我看看到底怎么做才能控制列的宽度。先谢谢了!
XX典藏官网-第四套人民币收藏网,第三套人民币收藏,第五套人民币,连体钞,纪念钞,人民币最新价格行情表及图片
- 您的当前位置:首页
- 藏品展示区
goods
下面是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没生效的问题,我想还是因为没选对元素
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
推荐阅读
-
关于css的兼容_html/css_WEB-ITnose
-
关于切图的严重问题_html/css_WEB-ITnose
-
,关于IE8兼容HTML5 CSS3 还有@media的问题_html/css_WEB-ITnose
-
求助,关于
- 宽度控制的问题_html/css_WEB-ITnose
-
关于我的新皮肤_html/css_WEB-ITnose
-
关于盒模型的理解_html/css_WEB-ITnose
-
关于JS 回掉函数的使用_html/css_WEB-ITnose
-
关于网页路径的疑惑_html/css_WEB-ITnose
-
html 关于ul标签的_html/css_WEB-ITnose
-
终于成为博客员的一员了,这是我的第一篇博文,写一个关于ul li内容宽度的问题和解决方案_html/css_WEB-ITnose