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 {覆盖默认的li编号{1}}。改变你的CSS：

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/

移除li和p上的宽度，将其放在盒子包装容器上。否则他们开箱即用。应在容器上设置宽度。
删除了ul的默认边距，...
修正了错误地应用于ol list-items的样式。
身高自动无任何影响因此将其删除

在主容器上添加了填充

 /* 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;
}

<li>没有用填充物移动子弹</li>

4 个答案:

Demo Fiddle