テーブル行 table-cell_html/css_WEB-ITnose に関する事項-htmlチュートリアル-php.cn

ディスカッションへの返信 (解決策)

ホームページ

ウェブフロントエンド

htmlチュートリアル

テーブル行 table-cell_html/css_WEB-ITnose に関する事項

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

最近、友人のウェブサイト構築を手伝いました。私には実務経験がないので、やりながら学ぶしかありません。ページは HTML+CSS という非常にシンプルな構成で、最後に本文に CSS テーブルレイアウトを使用しています。以下のコードを参照してください。
写真の赤い部分は、テーブル行の内側に配置された 2 つのテーブルセルです。私を混乱させているのは、セルの幅を調整できないことです。理由はわかりません。この問題がどこにあるのかを理解するのを手伝ってください。

これまでウェブサイトを作成したことがなく、急いでいたので、コードが少し乱雑です。先輩方、頑張って列の幅をコントロールする方法を教えてください。まず、ありがとうございます！

<!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" width=""/></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;}

ログイン後にコピー

枠線については、Chrome ブラウザを使用します。ディスプレイが付いています。
いくつかの提案: 1. タグはドキュメント内のインライン要素 (通常はテキスト) を結合するために使用されます。 2. ページで id 属性を頻繁に使用しないでください。コードの再利用には適さない一方で、名前の競合やスクリプトエラーが発生しやすくなります。

幅を調整するだけなので簡単です、

#cell_list ul{	width: 500px;}

ログイン後にコピー

枠線については、Chrome ブラウザを使用しており、表示されています。
いくつかの提案: 1. タグはドキュメント内のインライン要素 (通常はテキスト) を結合するために使用されます。 2. ページで id 属性を頻繁に使用しないでください。コードの再利用には適さない一方で、名前の競合やスクリプトエラーが発生しやすくなります。

私のコードを辛抱強く読んでいただくために時間を割いていただきありがとうございます。
枠線が表示できなかったのは私自身の CSS 構文エラーが原因でした。良い！しかし、幅の問題はまだ解決されていません。
まずは下の写真をご覧ください。 1 と 2 は 1 つの行に、3 と 4 は 1 つの行に、5 と 6 は別の行にあります。 HTML コードは変更されていませんが、CSS でテーブル、行、セルの幅属性をどのように設定しても、効果がありません。なぜだか分からない。以下の画像と 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 に追加され、CSS の ID は header_test です

ブラウザで F12 を押して、変更する要素を確認します。 idを変更してCSSを変更すると、widthが反映されない問題については、正しい要素を選択していないことが原因だと思います

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7724

Java チュートリアル

1643

CakePHP チュートリアル

1396

Laravel チュートリアル

1290

PHP チュートリアル

1233

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。