CSS代码对齐（html和CSS3）

Question

任何人都可以帮助我对齐列表，我希望文本以与第一行相同的边距显示。

列表样式图像

Answer 1

现在你看到我..

body { 
 
    margin: 0; 
 
    color: #fff; 
 
    font-family: sans-serif; 
 
} 
 

 
.list { 
 
    background-color: #EA7125; 
 
} 
 

 
.list-item { 
 
    clear: both; 
 
    padding: 10px; 
 
} 
 

 
.list-item > p { 
 
    margin-left: 85px; /* this line do the trick */ 
 
} 
 

 
.order { 
 
    float: left; 
 
    width: 75px; 
 
    height: 50px; 
 
    background-color: rgba(0, 0, 0, .1); 
 
    border-radius: 4px; 
 
    box-shadow: inset -1px -1px 1px rgba(0, 0, 0, .1), inset 1px 1px 1px rgba(0, 0, 0, .1); 
 
}

<div class="list"> 
 
    <div class="list-item"> 
 
     <span class="order"></span> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem nisi aspernatur, veniam quidem perferendis quisquam perspiciatis vel cupiditate nam. Est alias quis ipsam id rem. Ut deserunt recusandae fugit quam!</p> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nostrum eos facilis labore quisquam totam, soluta repellat deleniti inventore. Id sed enim ratione. Soluta dolorum, maxime expedita obcaecati sapiente distinctio!</p> 
 
    </div> 
 

 
    <div class="list-item"> 
 
     <span class="order"></span> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugiat eveniet sapiente saepe non ullam iste, incidunt nesciunt voluptatibus sunt soluta molestiae quaerat beatae cupiditate aut, necessitatibus dolores iusto at?</p> 
 
    </div> 
 
</div>

Answer 2

检查下面的代码

ul li{ 
    list-style-type: disc; 
    list-style-position: outside; 
    margin-left: 1em; 
} 

http://jsfiddle.net/selvassn/x0nx5fts/