css - 如何将一个 DIV 包裹在一个 DIV 中

Question

我试图将 div (noint_box1) 包装在一些 div 中，但是我没有成功。请检查一下 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}

Answer 1

html和css都比较臃肿，不推荐使用这种风格

美化后

HTML 来自 http://jsbeautifier.org/

<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>

和 CSS 通过 http://cssbeautify.com/

#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 看起来过多并且可能会被清理