html - Accordion 内容左对齐呈现导致缩进问题 - css，html

Question

我正在使用选项卡和 Accordion 面板的组合来组织文本文档，并且在功能上一切正常，但我无法将其格式化为 word 文档，特别是使用空白缩进。我一直在使用列表来添加空格，但每个 Accordion block 中的文本似乎完全左对齐并且忽略了列表格式。知道是什么原因造成的吗？谢谢!

代码:http://codepen.io/anon/pen/Dyjwi/

我认为可能是 css 的这一部分中的某个地方导致了它，它可能与显示或填充有关。

/*Define Accordion box*/
.accordion { 
    width:880px; 
    margin:10px auto; 
    color:#000000; 
    background:#000000; 
    padding:0px; 
}

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target { 
    background:#FFF; 
    padding:10px;
}
.accordion section:target:hover { 
    background:#FFF; 
}
.accordion section:target h2 {
    width:100%;
}
.accordion section:target h2 a{ 
    color:#333; 
    padding:0;
}
.accordion section:target p {
    display:block;
}
.accordion section h2 a{
    padding:8px 10px;
    display:block; 
    font-size:16px; 
    font-weight:normal;
    color:#eee; 
    text-decoration:none; 
}

/*set style of closed slide*/
.accordion section{ 
    float:left; 
    color:#333; 
    cursor:pointer; 
    background: #333; 
    margin:3px; 
}
.accordion section:hover {
    background:#444;
}
.accordion section p { 
    display:none; 
}
.accordion section:after{
    position:relative;
    font-size:24px;
    color:#000;
    font-weight:bold;}
.accordion section:nth-child(1):after{content:'1';}
.accordion section:nth-child(2):after{content:'2';}
.accordion section:nth-child(3):after{content:'3';}
.accordion section:nth-child(4):after{content:'4';}
.accordion section:nth-child(5):after{content:'5';}
.accordion section:nth-child(6):after{content:'6'; }
.accordion section:nth-child(7):after{content:'7';}
.accordion section:nth-child(8):after{content:'8';}
.accordion section:nth-child(9):after{content:'9';}
.accordion section:nth-child(10):after{content:'10';}
.accordion section:nth-child(11):after{content:'11';}
.accordion section:nth-child(12):after{content:'12';}
/*End General Accordion****************************************************************************/

/*Vertical Accordion *************************************************************************/
.vertical section{ width:100%; height:40px;
    -webkit-transition:height 0.2s ease-out;
    -moz-transition:height 0.2s ease-out;
    -o-transition:height 0.2s ease-out;
    -ms-transition:height 0.2s ease-out;
    transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{ 
    height:250px; 
    width:97%; 
}

.vertical section h2 {
    position:relative; 
    left:0; 
    top:0px; 
}

/*Set position of the number on the slide*/
.vertical section:after{ 
    top:-60px;
    left:810px;
}
.vertical section:target:after{ 
    left:-9999px;
}
/*Vertical Accordion****************************************************************************/ 

Answer 1

嗯，你正在使用重置:

 * {
margin: 0;
padding: 0;
}

因此将此添加到您的代码 CSS 中:

ul li ul li{
    margin:inherit; /* or some size in px */
}

并像这样更改您的 html :

<ul>
    <li><b>Tips:</b>
    <ul>
        <li>- Apply to object with: Modify >> Make Live</li>
        <li>- Creating a circle plane: Create circle curve -> convert to plane</li></ul>
    </li>
</ul>

Demo在 jsfiddle 上，我在使用 codepen 时遇到了一些问题。