如何增加標記大小并使串列項的文本居中？-有解無憂

我創建了一個簡單的無序串列：

<body>
    <div class="todo-section">
        <label for="bulletPoints">Todo:</label>
        <ul id="bulletPoints">
            <li>Apples</li>
            <li>Bananas</li>
            <li>Pears</li>
        </ul>
    </div>
</body>

我使用圓圈作為標記，我意識到這些太小了。我可以增加標記的字體大小，但在這種情況下，我的串列項的文本不再與我的專案符號對齊。

我已經嘗試了不同的樣式，以至于我無法相信僅僅增加標記大小并仍然擁有設計精美的串列是多么困難。這是我最新的 CSS 設定：

.todo-section {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 5fr;
  padding: 0 10px;
  width: 50%;
  border: 1px solid black;
}

.todo-section label {
  margin-top: .57rem;
}

#bulletPoints {
  margin: 0;
  list-style-type: circle;
  list-style-position: inside;
}


#bulletPoints li {
    line-height: 2rem;
}

#bulletPoints li::marker {
    font-size: 2rem;
    margin-right: 10px;
}

有人可以幫我嗎？

uj5u.com熱心網友回復：

使用::markerCSS 偽元素：

ul li::marker {
  color: red;
  font-size: 2.5em;
 }

uj5u.com熱心網友回復：

將您的文本串列居中用于 li 顯示：flex align-items: center justify-content: center 和第一個問題使用使用 ::marker CSS 偽元素：然后使用 font-size

uj5u.com熱心網友回復：

您可以創建自己的標記

        #bulletPoints {
          margin: 0;
          list-style-type: none;
          list-style-position: inside;
        }


        #bulletPoints li {
            line-height: 2rem;
        }
        
        #bulletPoints li:before {
            content: '?';
            margin-right: 10px;
        }
        
        /*
        #bulletPoints li::marker {
            padding-top: 10px;
            font-size: 2rem;
            margin-right: 10px;
        }
        */

或者只是留下內容：''; 并將任何影像加載為圖示

uj5u.com熱心網友回復：

一種方法是使用 from sup標簽：

.todo-section {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 5fr;
  padding: 0 10px;
  width: 50%;
  border: 1px solid black;
}

.todo-section label {
  margin-top: .57rem;
}

#bulletPoints {
  margin: 0;
  list-style-type: circle;
  list-style-position: inside;
}


#bulletPoints li {
    line-height: 2rem;
    
}

#bulletPoints li::marker {
    font-size: 2rem;
    margin-right: 10px;
}

<body>
    <div class="todo-section">
        <label for="bulletPoints">Todo:</label>
        <ul id="bulletPoints">
            <li><sup>Apples</sup></li>
            <li><sup>Bananas</sup></li>
            <li><sup>Pears</sup></li>
        </ul>
    </div>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/413040.html

標籤：

上一篇：如何使覆寫僅在特定的CSSflexbox列上延伸？

下一篇：引導文本中心的條件對齊