如何使用css將特定列表項向左移動一些像素？

Question

如上圖所示，我希望塊內容爲「This is heading」的塊與書本圖標內嵌定位。

這裏是我的html代碼

<div class="lessions"> 
    <ul> 
     <li class="chapter"><a href="#">History</a></li> 
     <li class="chapter"><a href="#">History</a></li> 
     <li class="chapter"><a href="#">History</a></li> 
     <li class="chapter"><a href="#">History</a></li> 
     <li class="lession-heading"><a href="#">This is heading</a></li> 
     <li class="chapter"><a href="#">History</a></li> 
     <li class="chapter"><a href="#">History</a></li> 
     <li class="chapter"><a href="#">History</a></li> 
    </ul> 
</div> 

而且我的CSS

.lession-heading{ 
    background: #c1c1c1; 
    font-size: 100%; 
    border: 1px solid #aaa; 
    padding: 15px 0 15px 15px!important; 
    margin-left: 0px; 
    color: #000; 
    list-style-type: none; 
} 

Answer 1

你可以在你的列表項使用陰性切緣，與剩下的把它內聯。 margin-left: -15px;

.lession-heading { 
 
    background: #c1c1c1; 
 
    font-size: 100%; 
 
    border: 1px solid #aaa; 
 
    padding: 15px 0 15px 15px!important; 
 
    margin-left: -15px; 
 
    color: #000; 
 
    text-align: left; 
 
    list-style-type: none; 
 
}

<div class="lessions"> 
 
    <ul> 
 
    <li class="chapter"><a href="#">History</a></li> 
 
    <li class="chapter"><a href="#">History</a></li> 
 
    <li class="chapter"><a href="#">History</a></li> 
 
    <li class="chapter"><a href="#">History</a></li> 
 
    <li class="lession-heading"><a href="#">This is heading</a></li> 
 
    <li class="chapter"><a href="#">History</a></li> 
 
    <li class="chapter"><a href="#">History</a></li> 
 
    <li class="chapter"><a href="#">History</a></li> 
 
    </ul> 
 
</div>

Answer 2

所以，如果我理解正確的話，左邊的書是對列表中的要點。

有一些不同的事情可以做，以嘗試解決這個：

1.你可以將它從列表更改爲P系列的標籤，並留下影像作爲你的任何文字之前插入書：

img { 
 
    height: 20px; 
 
} 
 
#heading{ 
 
    background:#c1c1c1; 
 
    border: 1px solid #aaa; 
 
    padding: 15px 0 15px 15px!important; 
 
    list-style-type:none; 
 
    max-width:140px; 
 
}

<p> 
 
    <a href="#"><img src="http://thebookman.org/bookwebsite.jpg"> Chapter One </a> 
 
    </p> 
 
    <p> 
 
    <a href="#"> <img src="http://thebookman.org/bookwebsite.jpg">Chapter Two </a> 
 
    </p> 
 
    <p id="heading">This is the heading</li> 
 
    <p> 
 
    <a href="#"><img src="http://thebookman.org/bookwebsite.jpg"> Chapter Three </a> 
 
    </p>

你可以把列表轉換成一個div容器，並給它一個利潤率左與把它在線頭

.lession-heading{ 
 
    background: #c1c1c1; 
 
    font-size: 100%; 
 
    border: 1px solid #aaa; 
 
    padding: 15px 0 15px 15px!important; 
 
    margin-left: 0px; 
 
    color: #000; 
 
    list-style-type: none; 
 
} 
 
div{ 
 
    margin-left:15px; 
 
}

<div class="lessions"> 
 
    <ul> 
 
     <div><li class="chapter"><a href="#">History</a></li> 
 
     <li class="chapter"><a href="#">History</a></li> 
 
     <li class="chapter"><a href="#">History</a></li> 
 
     <li class="chapter"><a href="#">History</a></li></div> 
 
     <li class="lession-heading"><a href="#">This is heading</a></li> 
 
     <div><li class="chapter"><a href="#">History</a></li> 
 
     <li class="chapter"><a href="#">History</a></li> 
 
     <li class="chapter"><a href="#">History</a></li></div> 
 
    </ul> 
 
</div>

你可以給報頭中的負緣迫使它更遠左側。

.lession-heading{ 
 
    background: #c1c1c1; 
 
    font-size: 100%; 
 
    border: 1px solid #aaa; 
 
    padding: 15px 0 15px 15px!important; 
 
    margin-left: 0px; 
 
    color: #000; 
 
    list-style-type: none; 
 
    margin-left:-20px; 
 
}

<div class="lessions"> 
 
    <ul> 
 
     <li class="chapter"><a href="#">History</a></li> 
 
     <li class="chapter"><a href="#">History</a></li> 
 
     <li class="chapter"><a href="#">History</a></li> 
 
     <li class="chapter"><a href="#">History</a></li> 
 
     <li class="lession-heading"><a href="#">This is heading</a></li> 
 
     <li class="chapter"><a href="#">History</a></li> 
 
     <li class="chapter"><a href="#">History</a></li> 
 
     <li class="chapter"><a href="#">History</a></li> 
 
    </ul> 
 
</div>