CodePen：無法在div中格式化列表文本[CSS]

Question

我正在嘗試為div “終端樣式”設置無序列表項的樣式，但無法使其正常工作。
列表項居中對齊並用項目符號標記，而不是按我的意圖左對齊

密碼筆

的CSS

.outputDiv ul{
   padding:0rem;
   margin:0rem;
}

.outputDiv li{
   list-style: none;
}

JS

  function processOutput(inputString = "", outputString) {
    const outputList = document.querySelector(".output-div ul");
    const listItem = document.createElement("li");
    const inputEl = document.createElement("kbd");
    const outputEl = document.createElement("samp");
    let echoInput = (inputEl.textContent = inputString);
    let scoobyspeak = (outputEl.textContent = outputString);

    const limitLines = (max = 0) => {
      if (outputList.childNodes.length === ++max)
        outputList.removeChild(outputList.childNodes[0]);
    };
    if (outputString === "") {
      listItem.innerHTML = "Please enter  some text into the input field";
      limitLines();
      outputList.appendChild(listItem);
    } else {
      listItem.innerHTML = `'${echoInput}' <i>scoobydized</i> to: <b>${scoobyspeak}</b>`;
      outputList.appendChild(listItem);
      limitLines(4);
    }
    initInput();
  }

Answer 1

使用此CSS：

.output-div ul {
  list-style: none;
  padding: 0px
}

您引用的是其他類名，而不是使用正確的選擇器。

這是在CodePen上測試的。