0

一部の div 内で div (noint_box1) をラップしようとしていますが、失敗しています。cssをチェックして、私が間違っていることを確認してください。

HTML:

<div id="tabs-container">
        <div id="tabs-box">
      <div class="tab active" id="tab1" onclick="showtab(1)">Delivery</div>
    <div class="tab" id="tab2" onclick="showtab(2)">Payments</div>
    <div class="tab" id="tab3" onclick="showtab(3)">Returns</div>
    <div class="tab" id="tab4" onclick="showtab(4)">Discount</div>
    </div>
    <div id="tab-content-box">
    <div class="tab-content active" id="content1">CONTENT </div>
    <div class="tab-content" id="content2">CONTENT</div>
    <div class="tab-content" style="text-decoration:none" id="content3">COTENT</div>
    <div class="tab-content" id="content4">CONTENT</div>
    </div>


    </div>
    </div>

スタイルシート:

#noint_box1{text-align:center;}
#tabs-container { width:942px; border-color: transparent}
#tab-content-box { border:none; border-color: transparent }
#tabs-box { height: 30px; border-color: transparent; padding-bottom:3px;}
.header1 {font: 22px 'MuliLight', Arial, sans-serif; color: #026c9f; text-align:left; vertical-align:top; text-shadow: #6ac6f0 1px 1px 1px; font-weight:bold }
.tab {     
 font-family:Arial, Helvetica, sans-serif;
 cursor:pointer
.tab.active { border-bottom: 2px solid white; text-align:left }
.tab.active { border-bottom: 2px solid white; text-align:left}
.tab-content { display: none; padding: 5px; text-align:left}
.tab-content.active { display: block; text-align:left}
#tab1 {margin-right:10px; text-align:center}
#tab2 {margin-right:10px; text-align:center}
#tab3 {margin-right:10px; text-align:center}
#tab4 {margin-right:10px; text-align:center}
#content1 {font: 16px 'MuliLight', Arial, sans-serif; text-align:left; color: #CCC; line-height:20px}
#content2 {font: 16px 'MuliLight', Arial, sans-serif; text-align:left; color: #CCC; line-height:20px; margin-bottom:3px}
#content3 {font: 16px 'MuliLight', Arial, sans-serif; text-align:left; color: #CCC; line-height:20px}
#content4 {font: 16px 'MuliLight', Arial, sans-serif; text-align:left; color: #CCC; line-height:20px}
4

2 に答える 2

2

html と css の両方が肥大化しているため、このようなスタイルの使用はお勧めしません

両方美化してから

http://jsbeautifier.org/経由の HTML

<div id="noint_box1">
    <td class="topparts" width="936">MY CONTENT1</td>
    <div id="tabs-container">
        <div id="tabs-box">
            <div class="tab active" id="tab1" onclick="showtab(1)">Delivery</div>
            <div class="tab" id="tab2" onclick="showtab(2)">Payments</div>
            <div class="tab" id="tab3" onclick="showtab(3)">Returns</div>
            <div class="tab" id="tab4" onclick="showtab(4)">Discount</div>
        </div>
        <div id="tab-content-box">
            <div class="tab-content active" id="content1">CONTENT1
                <br />
            </div>
            <div class="tab-content" id="content2">CONTENT2</div>
            <div class="tab-content" style="text-decoration:none" id="content3">CONTENT3</div>
            <div class="tab-content" id="content4">CONTENT4</div>
        </div>

およびhttp://cssbeautify.com/経由の CSS

#noint_box1 {
    text-align: center;
}

#tabs-container {
    width: 942px;
    border-color: transparent;
}

#tab-content-box {
    border: none;
    border-color: transparent;
}

#tabs-box {
    height: 30px;
    border-color: transparent;
    padding-bottom: 3px;
}

.header1 {
    font: 22px 'MuliLight', Arial, sans-serif;
    color: #026c9f;
    text-align: left;
    vertical-align: top;
    text-shadow: #6ac6f0 1px 1px 1px;
    font-weight: bold;
}

.tab {
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer
.tab.active { border-bottom: 2px solid white;
    text-align: left;
}

.tab.active {
    border-bottom: 2px solid white;
    text-align: left;
}

.tab-content {
    display: none;
    padding: 5px;
    text-align: left;
}

.tab-content.active {
    display: block;
    text-align: left;
}

#tab1 {
    margin-right: 10px;
    text-align: center;
}

#tab2 {
    margin-right: 10px;
    text-align: center;
}

#tab3 {
    margin-right: 10px;
    text-align: center;
}

#tab4 {
    margin-right: 10px;
    text-align: center;
}

#content1 {
    font: 16px 'MuliLight', Arial, sans-serif;
    text-align: left;
    color: #CCC;
    line-height: 20px;
}

#content2 {
    font: 16px 'MuliLight', Arial, sans-serif;
    text-align: left;
    color: #CCC;
    line-height: 20px;
    margin-bottom: 3px;
}

#content3 {
    font: 16px 'MuliLight', Arial, sans-serif;
    text-align: left;
    color: #CCC;
    line-height: 20px;
}

#content4 {
    font: 16px 'MuliLight', Arial, sans-serif;
    text-align: left;
    color: #CCC;
    line-height: 20px;
}

HTMLコードの問題を簡単に観察でき、cssが過剰に見え、クリーンアップされる可能性があります

于 2012-11-07T00:49:08.530 に答える
1

HTML コードには次の 3 つの問題があります。

  • ディビジョンの間にテーブル セルがあります。表の行にいる場合、分割は存在できません。また、表の行にない場合、表のセルは存在できません。

  • の終了タグはありません。<div id="tabs-container">

  • の終了タグはありません。<div id="noint_box1">

于 2012-11-07T00:41:52.143 に答える