列出項目的項目符號未對齊

Question

所以我可能有一個簡單的問題要回答...

我正在fairhopemicrocottages.com網站上工作 ，在“關於”頁面上，使用“ li”標簽的項目符號未正確對齊。

我希望項目符號點在第一個單詞上，而不是在兩個句子的中間。 很煩人。

這絕對是由於我從另一個發現的站點獲取了此站點設計，並且圍繞CSS進行了工作，但是無法編輯CSS。 （或者我可以嗎？）

如果有人可以幫助我解決該問題，那就太好了！ 謝謝！

獎勵問題：在首頁上，我喜歡找到的圖片，但是它與導航欄文字和我的圖像不能很好地融合在一起，對於像我父母這樣的老人來說，很難看到文字。

是否有解決方法將頂部的該部分的顏色更改為黑色？ 僅僅是為了使文本和圖像易於閱​​讀？

Answer 1

樣式表中的第56行是這樣的：

li {
    background: black url("../img/list.png") no-repeat scroll left center;
}

將其更改為left top ，然后將其向上移動：

background: black url("../img/list.png") no-repeat scroll left top;

但這對您的li不好，因為它們太高了，所以設置一個特定的頂部像這樣：

background: url("../img/list.png") no-repeat scroll left 10px;

要在頂部導航中修復該問題以將其更改為黑色，只需在該部分添加背景：

#slideshow header, .black header {
    border-bottom: 1px dotted rgba(255, 255, 255, 0.15);
    position: relative;
    z-index: 10;
    background: black;
}

Answer 2

您正在用自定義背景替換默認列表項目符號，並且該背景的位置居中，因此：

li { background: url("../img/list.png") no-repeat left 11px; }

通過用left 11px替換left center ，您的項目符號將出現在您想要的位置。

Answer 3

此外，您可以通過更改樣式來解決此問題：

添加此樣式：

ul {
  list-style: url("../img/list.png");
}

刪除此樣式：

li {
  background: url("../img/list.png") no-repeat left center;
}