與反增

Question

有序列表比對我有沒有對齊，如果正確列表項具有長文本的簡單有序列表。

https://jsfiddle.net/rkmv3rn3/6/

.page-left-bar { 
 
    width: 200px; 
 
    background-color: #fff; 
 
} 
 

 
ol { 
 
    margin-left: 0px; 
 
    padding-left: 20px; 
 
} 
 

 
.handbook-page ol { 
 
    color: #687074; 
 
    counter-reset: item; 
 
} 
 

 
ol { 
 
    counter-reset: item; 
 
    color: #687074; 
 
} 
 

 
ol li { 
 
    display: block; 
 
    padding: 5px 0; 
 
} 
 

 
ol li a { 
 
    text-decoration: none; 
 
    color: #687074; 
 
    padding-left: 10px; 
 
} 
 

 
ol li:before { 
 
    content: counters(item, ".") " "; 
 
    counter-increment: item; 
 
    font-weight: bold; 
 
}

<h1>LIST OL child list alignment</h1> 
 
<div class="page-left-bar"> 
 
    <ol> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#news">News</a></li> 
 
    <li><a href="#contact">Contact</a></li> 
 
    <ol> 
 
     <li><a href="#home">Sub menu</a></li> 
 
     <li><a href="#news">Sub menu long name</a></li> 
 
     <li><a href="#contact">Sub menu</a></li> 
 
     <li><a href="#about">Sub menu</a></li> 
 
    </ol> 
 
    <li><a href="#about">About my company vision and mission</a></li> 
 
    </ol> 
 
</div> 
 

 

 
<h1> 
 
Normal List </h1> 
 
<div class="page-left-bar"> 
 
<ol> 
 
     <li><a href="#home">Home</a></li> 
 
     <li><a href="#news">News</a></li> 
 
     <li><a href="#contact">Long menuame </a></li> 
 
     <li><a href="#about">About my company vision and mission</a></li> 
 
    </ol> 
 
</div>

如何，這樣如果文字是漫長的，他們是左對齊的正確，如果列表文本向下移動到第二線對齊列表。

Answer 1

在這裏，你可以做以下的方法。

給display: table-row;到ol li和display: table-cell;到ol li a

ol li { 
    display: table-row; 
    padding: 5px 0; 
} 

ol li a { 
    text-decoration: none; 
    color: #687074; 
    padding-left: 10px; 
    display: table-cell; 
} 

Working Fiddle