Question

基本上我的“main”div中有导航栏，左侧缩进。

enter image description here

我无法弄清楚这个缩进的来源，我尝试填充/边距0，填充左/边距左0但仍然没有，它甚至不会移动一英寸！

我甚至尝试过mozilla firebug检查员试图找出我是否选择了它，基本上没有解决方案。

这里有html / css文件，如果有人有时间偷偷摸摸地使用HTML代码：

body {
  background-color: #000;
  color: white;
}

/* Style for tabs */
#main {
  color: 111;
  width: 600px;
  margin: 8px auto;
}

#main > li, #main > ul > li
{ list-style:none; float:left; }

#main ul a {
  display:block;
  padding:6px 10px;
  text-decoration:none!important;
  margin:1px 1px 1px 0;
  color:#FFF;
  background:#444;
}

#main ul a:hover {
  color:#FFF;
  background:#111;
}

#main ul a.selected {
  margin-bottom:0;
  color:#000;
  background:snow;
  border-bottom:1px solid snow;
  cursor:default;
}

#main div {
  padding:10px 10px 8px 10px;
  *padding-top:3px;
  *margin-top:-15px;
  clear:left;
  background:snow;
  height: 300px ;
}

#main div a {
  color:#000; font-weight:bold;
}
#male, #female, #all, #new {
  color: black;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>2015 Race Finishers</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="my_style.css">
  </head>
  <body>
    <header>
      <h2>2015 Race Finishers</h2>
    </header>
    <div id="main">
      <ul class="idTabs">
        <li><a href="#male">Male Finishers</a></li>
        <li><a href="#female">Female Finishers</a></li>
        <li><a href="#all">All Finishers</a></li>
        <li><a href="#new">Add New Finishers</a></li>
      </ul>
      <div id="male">
        <h4>Male Finishers</h4>
        <ul id="finishers_m"></ul>
      </div>
      <div id="female">
        <h4>Female Finishers</h4>
        <ul id="finishers_f"></ul>
      </div>
      <div id="all">
        <h4>All Finishers</h4>
        <ul id="finishers_all"></ul>
      </div>
      <div id="new">
        <h4>Add New Finisher</h4>
        <form id="addRunner" name="addRunner" action="service.php" method="POST">
          First Name: <input type="text" name="txtFirstName" id="txtFirstName" /> <br>
          Last Name: <input type="text" name="txtLastName" id="txtLastName" /> <br>
          Gender: <select id="ddlGender" name="ddlGender">
          <option value="">--Please Select--</option>
          <option value="f">Female</option>
          <option value="m">Male</option>
          </select><br>
          Finish Time:
          <input type="text" name="txtMinutes" id="txtMinutes" size="10" maxlength="2" />(Minutes)
          <input type="text" name="txtSeconds" id="txtSeconds" size="10" maxlength="2" />(Seconds)
          <br><br>
          <button type="submit" name="btnSave" id="btnSave">Add Runner</button>
          <input type="hidden" name="action" value="addRunner" id="action">
        </form>
      </div>

    </div>
    <footer>
      <h4>Congratulations to all our finishers!</h4>
      <br>Last Updated: <div id="updatedTime"></div>
    </footer>
    <script src="scripts/jquery-1.6.2.min.js"></script>
    <script src="scripts/my_scripts.js"></script>
    <script src="scripts/jquery.idTabs.min.js"></script>
  </body>
</html>

这只是出于学习目的，但如果我能以某种方式解决这个问题，我真的很喜欢，最重要的是我不知道它来自哪里。

Answer 1

只需将padding: 0;添加到#main ul或.idTabs即可解决您的问题。

此外，您可能希望将list-style: none;从#main > li, #main > ul > li移至#main ul：它只是更好的语义。

填充来自用户默认样式表。如果您检查<ul＆gt;标记你会注意到-webkit-padding-start: 40px;的某些内容。因此，通过设置padding:0，我们确保所有浏览器都没有填充，从而解决您的问题。添加margin:0;和padding:0是一个好习惯，以确保所有浏览器看起来都一样（如果没有，至少有更多的相似性）。

Answer 2

我无法理解缩进的来源。但我发现使用否定边距解决了现在的问题。

#mian ul{ margin-left: -2.5em;}

剩下的部分你可以弄清楚。

如果您发现缩进的来源以及左边距是否适合您，请告诉我。

Answer 3

这个空间（填充左）的原因是ul。＆LT; UL>元素默认有一些左边填充，以便遵循列表结构。所以这里的问题不过是一样的。

它有左边的填充：40px;默认情况下，我猜。

将此添加到您的CSS文件中：

ul
{ padding: 0;
}

WORKING:DEMO

左侧和右侧的CSS无序列表缩进空间

3 个答案: