<li> 使用 css 样式化（chrome 问题）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4784319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<li> styling with css (chrome problems)
提问by cromestant
Hello I've got this weird problem with css.
你好，我在 css 方面遇到了这个奇怪的问题。
I'm displaying an unordered list
我正在显示一个无序列表
<ul>
<li>
<div class='align-left'>
PMI
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='19' class="elim" name="19">
</div>
</li>
<li>
<div class='align-left'>
GRANDS COMPTES
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='21' class="elim" name="21">
</div>
</li>
<li>
<div class='align-left'>
associations
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='22' class="elim" name="22">
</div>
</li>
<li>
<div class='align-left'>
PME
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='25' class="elim" name="25">
</div>
</li>
<li>
<div class='align-left'>
ecoles privees
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='28' class="elim" name="28">
</div>
</li>
<li>
<div class='align-left'>
organisme
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='32' class="elim" name="32">
</div>
</li>
<li>
<div class='align-left'>
test
</div>
<div class='align-right'>
<img src="/img/delete_icon2.png" id='34' class="elim" name="34">
</div>
</li>
</ul>
now this is accompanied by these css rules:
现在这伴随着这些css规则：
.align-right{
float: right;
}
.align-left{
float: left;
}
On chrome, the bullet point from the list is actually UNDER the text for the bullet point.
在 chrome 上，列表中的项目符号实际上位于项目符号文本的下方。
Why did I do this, I want the images to be aligned from top down.
我为什么要这样做，我希望图像从上到下对齐。
here are screenshots of the problem
这是问题的截图
thanks in advance.
提前致谢。
回答by Ross
the code you provided won't cause this problem.
您提供的代码不会导致此问题。
Depending on what you want to do, adding
根据您要执行的操作，添加
ul { list-style-type:none; }
ul { list-style-type:none; }
or
或者
ul li { padding-left:40px; }
ul li { padding-left:40px; }
may achieve desired effect.
可以达到预期的效果。
edit
编辑
try adding overflow:hidden;to the lielements
尝试添加overflow:hidden;到li元素
I'd also personally do it like this:
我个人也会这样做：
li {
background:url(/img/delete_icon2.png) no-repeat center right;
padding-right:25px; /*might need to adjust */
}
<ul>
<li>PMI</li>
<li>Bla bla</li>
</ul>
no need to over-complicate things.
没有必要使事情过于复杂。
If you want the DIVS clickable you can just do
如果您希望 DIVS 可点击，您可以这样做
<li><a href="delete.php">PMI</a></li>
<li><a href="delete.php">PMI</a></li>
and CSS:
和 CSS：
li a { display:block; width:xxx; height:xxx; }
li a { display:block; width:xxx; height:xxx; }
as required.
按要求。
回答by dclowd9901
Try playing with the list-style-positionproperty. Options are insideand outside.
尝试使用该list-style-position属性。选项是inside和outside。
回答by Alendia
I had the same problem and it seems that you do not have exact control over the position of the default bullet point.
我遇到了同样的问题，您似乎无法精确控制默认项目符号的位置。
For me the following was working in Firefox and in IE, but in Chrome it is positioned inside the text:
对我来说，以下内容适用于 Firefox 和 IE，但在 Chrome 中它位于文本内：
<ul style="list-style-position: outside; margin:0; padding:0;">
<li />
<li />
</ul>
I needed to set margins and paddings for both the list and the list items to get the bullet point(disk) outside the text
我需要为列表和列表项设置边距和填充以获取文本外的项目符号（磁盘）
<ul style="list-style-position: outside; margin:10px; padding:10px;">
<li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
<li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
</ul>
The strange part is, that if I set those bottom margins to anything less than 7 pixel, the bullets jump inside. 8px is the smallest working value, although there is lots of space around and between the elements (they move closer to each other fluently, only the bullet points start to jump).
奇怪的是，如果我将这些底部边距设置为小于 7 像素的任何值，子弹就会跳到里面。8px 是最小的工作值，尽管元素周围和元素之间有很多空间（它们流畅地相互靠近，只有项目符号开始跳跃）。
