<li> 不移动带有填充的子弹

Question

我正在尝试移动项目符号点，以便它们在我的包装盒内。他们不会动。我还尝试在有序列表中包含一个无序列表作为子列表。

HTML

<div class="box-wrap">
     <h2>Regler</h2>

    <p>
        <ul>
            <li>List Item
                <ol>
                    <li>Text Here</li>
                    <li>Text Here</li>
                    <li>Text Here</li>
                </ol>
            </li>
        </ul>
    </p>
</div>

CSS

.box-wrap {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
    -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
.box-wrap p {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    overflow: hidden;
    text-align: left;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
}
.box-wrap li {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
    list-style-type: circle;
}

谢谢

Answer 1

Demo Fiddle

你需要关闭你的ol并添加一个关闭</li>，移动子弹位置你也可以使用list-style-position:inside

此外，根据您的要求，您目前的ul 和ol 使用方式错误，并且通过提供所有li list-style-type: circle; 来覆盖默认的li 编号。更改您的 CSS：

.box-wrap {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
    -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}
ul, ol {
    list-style-position:inside;
}
.box-wrap p {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    overflow: hidden;
    text-align: left;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
}
.box-wrap li {
    font-family:'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 5px 30px;
    width: 640px;
    height: auto;
    background: #ffffff;
    color: #717171;
}
.box-wrap ul li {
    list-style-type: circle;
}

Answer 2

这是你需要的吗？ http://jqversion.com/#!/Xx29MFo

注意您的 HTML 和 CSS，因为有一些不需要的标签/属性。

Answer 3

如果你想摆脱要点，你需要添加你的 css，比如：

ul {list-style:none;}

如果你想在另一个列表中有列表，你可以这样写 例如，另一个列表中有一个列表

<ul class="parent">
  <li>Parent-1</li>
  <li>Parent-2</li>
  <li>Parent3
    <ul class="child">
     <li>Child3</li>
     <li>Child3</li>
     <li>Child3</li>
   </ul>
 </li>
</ul>

然后你可以将你的 CSS 应用到你的代码中，例如我想删除里面的项目符号 列表。

在此处输入代码

.parent .child li {list-style:none;}

我希望这对你有用。

祝你好运

Answer 4

http://jsfiddle.net/E5eW6/14/

1. 去掉li和p的宽度，放在box-wrap容器上。 否则，他们将开箱即用。应在容器上设置宽度。
2. 删除了 ul 上的默认边距，...
3. 修复了错误地应用于 ol 列表项的样式。
4. height auto 没有任何效果，因此将其删除

5. 在主容器上添加了填充

    /* apply a natural box layout model to all elements */
   *, *:before, *:after {
     -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }
   .box-wrap {
       margin: 20px 0 0 0;
       padding: 20px;
       -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
       box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
       max-width: 640px;
       font-family:'Open Sans', Arial, Helvetica, sans-serif;
       color: #717171;
   }
   .box-wrap h2 {margin:0;padding:0;font-size: 18px;}
   .box-wrap ul,  .box-wrap ol {margin:0.8em 0 0 0;padding:0;}
   .box-wrap ul ol {margin-left:0.5em;}
   .box-wrap ul, .box-wrap ol {
       font-size: 14px;
   }
   
   .box-wrap ul > li {
       list-style-type: circle;
   }
   .box-wrap ol > li {
       list-style-type: decimal;
   }
   .box-wrap li {
       background: #ffffff;
       color: #717171;
       list-style-position: inside;
   }