css中 li样式问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css中 li样式问题相关的知识，希望对你有一定的参考价值。
<style>
#div1 ul lifloat:left;weight:200px;height:200px;list-style:none;
#li1 background:red;;
#li2 background:blue;;
#li3 background:yellow;;
#li4 background:black;;
</style>
<body>
<div id='div1'>
<ul>
<li id='li1'></li>
<li id='li2'></li>
<li id='li3'></li>
<li id='li4'></li>
</ul>
</div>
</body>
为什么改不了li的背景颜色啊？！
#div1width:200px;
#li1 background:red;
#li2 background:blue;
#li3 background:yellow;
#li4 background:black;
你代码的问题：
1weight:200px;你是想写width吧
2;不需在花括弧后加分号 参考技术A 你li里没内容所以li的高和宽现在都是0 所以也就没有背景色了
你把li里加上内容或者给li设置高和宽就行了 参考技术B li里没有内容，你直接在<li id='li1'> 每个随便写入文字就可以看到背景了 </li> 参考技术C 因为你的宽度英文打错了。li其实没有宽度，所以你看不见背景颜色变。
li 元素的（使用 CSS 样式）标记在 chromium 浏览器上的位置错误，但在 Firefox 上很好
【中文标题】li 元素的（使用 CSS 样式）标记在 chromium 浏览器上的位置错误，但在 Firefox 上很好【英文标题】：li element's (styled with CSS) marker has wrong position on chromium browsers, but good on firefox 【发布时间】：2022-01-20 05:31:07 【问题描述】：代码：（Stack Overflow 上的 sn-p 显示良好）
@charset "UTF-8";
*
margin: 0;
padding: 0;
.content-body
text-align: center;
display: block;
.content-body-wrapper
text-align: center;
display: inline-block;
border-style: solid;
border-color: #2B3AA7;
border-width: 3px;
border-radius: 30px;
margin: 10px 10px 10px 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 15px;
.content-body p
max-width: 135ch;
margin-top: 15px;
margin-bottom: 5px;
text-align: center;
margin-left: auto;
margin-right: auto;
.content-body li
margin-top: 5px;
margin-bottom: 5px;
<!DOCTYPE html>
<html lang="sk">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content-body">
<div class="content-body-wrapper">
<ul>
<li>Podporu viacerých operačný systémov (Windows, MacOS, Linux)</li>
<li>Automatickú, manuálnu aktualizáciu z prostredia aplikácie</li>
<li>Šifrovanie databázy (AES-128bit)</li>
<li>Exportovanie do formátov PDF, BIN</li>
<li>Importovanie/Exportovanie jednotlivých záznamov medzi touto aplikáciou
</li>
<li>Podporu viacerých jazykov</li>
<li>Prispôsobivosť používateľského rozhrania</li>
<li>Importovanie záznamov z aplikácie Matrika pre jednoduchšiu migráciu
</li>
</ul>
</div>
</div>
</body>
</html>Chromium 浏览器（Chrome、Opera）截图：
Firefox 和 Stack Overflow 屏幕截图（如果 SO 渲染器更改，以备将来使用）：
我想在所有浏览器中实现 Firefox 和 SO 中的外观。我猜这是标记铬正在创建的一些隐含属性。
【问题讨论】：
【参考方案1】：在ul 上试试这个：
list-style: inside;
【讨论】：
以上是关于css中 li样式问题的主要内容，如果未能解决你的问题，请参考以下文章