故障排除LI元件

我无法让我的LI元件靠近其容器的左侧对齐。我在下面有我的HTML，当它显示LI元素在左右约30个像素时有一个余量。我想看看我能如何在容器上做出这样的冲洗，然后一旦我理解了这种技术，我就可以调整它，以便留下一些填充。故障排除LI元件

顺便说一句，我确实创建了一个fiddle这使它更容易看到问题，但不幸的是jsFiddle显示我想看到的结果！如果下面的HTML被复制/粘贴到文件中并在Chrome中显示，它看起来不同（每个LI都向右移动）。

下面是HTML ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     .parentSelectorBox 
     { 
     } 
     .parentSelectorBox .fieldsBox 
     { 
      border: 1px solid blue; 
      width: 250px; 
      margin: 5px; 
      float: left; 
     } 
     .parentSelectorBox .actionButtonsBox 
     { 
      border: 1px solid blue; 
      width: 100px; 
      margin: 5px; 
      float: left; 
     } 
     .parentSelectorBox .availableFields 
     { 
      border: 1px solid pink; 
      height: 100px; 
      overflow: auto; 
     } 
     .parentSelectorBox ul li 
     { 
      height: 20px; 
      list-style-type: none; 
      margin: 0 10 0 -15px; 
      padding: 0 10 0 -15px; 
      white-space: nowrap; 
      marker-offset: 105px; 
     } 
    </style> 
</head> 
<body> 
    <div id="parentSelectorBox" class="parentSelectorBox"> 
     <div id="availableFieldsBox" class="fieldsBox"> 
      <div id="availableFields" class="availableFields"> 
       <ul> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
        <li>A</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

来源

2012-02-18 John Livermore

如果jsFiddle显示的结果很好，那么它可能是你的代码中的其他东西，我猜... – elclanrs 2012-02-18 22:50:02

为'li'及其所有祖先元素设置'margin'和'padding'为'0'。此外，你不能有负填充。 @elclanrs：JS Fiddle使用重置样式表来移除默认样式。 – 2012-02-18 22:50:20

您需要删除ul的padding属性：

.parentSelectorBox ul { 
    margin: 0; 
    padding: 0 
}

来源

2012-02-18 22:51:42 BenM

尝试从UL元素去除填充。

ul{padding:0px;}

应该工作。您的问题不需要删除保证金！

PS：取消选中小提琴左侧的“标准化CSS” - 复选框以查看您的问题。

来源

2012-02-18 22:53:28 Alex

实际上，从'ul'移除边距是必要的。 OP表示他在演奏中显示的版本是他正在寻找的。如果不从'ul'中删除保证金，顶部会有一个保证金... – BenM 2012-02-18 22:56:59

好的，如果他想要从小提琴中得到准确的结果，他必须删除保证金。但是他只想让他的“LI元素靠近他们容器的左侧”，所以它并不是真的有必要。 – Alex 2012-02-18 23:09:55

从他的帖子：“但不幸的是jsFiddle显示我想看到的结果！” – BenM 2012-02-18 23:13:21

故障排除LI元件

回答

相关问题