[英]CodePen: having trouble formatting list text in a div [CSS]
I'm trying to style unordered list items in a div 'terminal style' but I can't get it to work just right. 我正在尝试为div “终端样式”设置无序列表项的样式,但无法使其正常工作。
The list items are center aligned and bulleted instead of left aligned as I intend 列表项居中对齐并用项目符号标记,而不是按我的意图左对齐
CSS 的CSS
.outputDiv ul{
padding:0rem;
margin:0rem;
}
.outputDiv li{
list-style: none;
}
JS 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();
}
Use this CSS: 使用此CSS:
.output-div ul {
list-style: none;
padding: 0px
}
You are referencing a different class name, and not using the correct selector. 您引用的是其他类名,而不是使用正确的选择器。
This one is tested on CodePen. 这是在CodePen上测试的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.