左对齐水平列表的元素

我有一个列表，我用它作为水平时间轴。但是，我在尝试左对齐列表时遇到问题，因此第一个元素与滚动条的左侧齐平。我知道问题的一部分是我有一套margin-left，我需要一些方法来放置列表元素之间的空间（删除margin-left推动第一个元素进一步向左，但不是所有的方式与左侧齐平滚动条。左对齐水平列表的元素

.navbar { 
 
\t margin-bottom:0px; 
 
} 
 

 
.jumbotron { 
 
\t margin-bottom:0px; 
 
} 
 

 
#timeline { 
 
\t list-style:none; 
 
\t white-space:nowrap; 
 
    overflow:auto; 
 
} 
 

 
#timeline li { 
 
\t display:inline-block; 
 
\t padding:1.5%; 
 
\t border:1px solid #d1d2d3; 
 
\t margin-left:2%; 
 
\t margin-bottom:2%; 
 
\t margin-top:2%; 
 
\t text-align:center; 
 
} 
 

 
#timeline li h3, #timeline li em { 
 
\t display:block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <title>My Website</title> 
 
\t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
 
     rel="stylesheet"> 
 
\t <link href="styles.css" rel = "stylesheet" type = "text/css"> 
 
    </head> 
 
    
 
    <body> 
 
    
 
\t <nav class="navbar navbar-default"> 
 
\t \t <div class="container-fluid"> 
 
\t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t <li><a href="#">LinkedIn</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </nav> 
 
    
 
\t <div class="jumbotron text-center"> 
 
\t \t <h1>My Name</h1> 
 
\t </div> 
 
\t 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-12"> 
 
\t \t \t \t <h1>What I've Been Up To</h1> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <!--Timeline--> 
 
\t \t <div class="row" style="overflow:auto"> 
 
\t \t \t <ul id="timeline"> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>Graduated from College</h3> 
 
\t \t \t \t \t <em>May 24, 2012</em> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>Started my first job</h3> 
 
\t \t \t \t \t <em>June 30, 2012</em> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>Started my second job</h3> 
 
\t \t \t \t \t <em>April 3, 2014</em> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>Bought a house!</h3> 
 
\t \t \t \t \t <em>August 12, 2015</em> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>Got married</h3> 
 
\t \t \t \t \t <em>June 3, 2016</em> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>First child born</h3> 
 
\t \t \t \t \t <em>May 1, 2017</em> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
\t <footer> 
 
\t <p> Copyright &copy; 
 
\t \t <!--Script displays the current year--> 
 
\t \t <script type="text/javascript"> 
 
\t \t var d = new Date() 
 
\t \t document.write(d.getFullYear()) 
 
\t \t </script> 
 
\t </p> 
 
\t </footer> 
 
    </body> 
 

 
</html>

来源

2017-05-25 bavenafu

你的意思是水平'li'垂直或'li'的内容左对齐？ –

我会强烈建议您将学习如何使用浏览器的开发者控制台。这种情况的快速检查显示，该#timeline元件具有padding-left 40像素。

我删除了该填充，并在时间轴项目上更改了您的margin-left，以便它仅在元素之间放置空白。我这样做是通过使用adjacent sibling selector：

#timeline li + li { 
    margin-left: 2%; 
}

而且 - 作为一个侧面说明，0px是多余的/没有必要，因为0是无单位的，你可以简单地使用值0（如margin-bottom: 0;）

这里是你的代码段，修改才能正常工作：

.navbar { 
 
    margin-bottom: 0; 
 
} 
 

 
.jumbotron { 
 
    margin-bottom: 0; 
 
} 
 

 
#timeline { 
 
    list-style: none; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    padding-left: 0; 
 
} 
 

 
#timeline li { 
 
    display: inline-block; 
 
    padding: 1.5%; 
 
    border: 1px solid #d1d2d3; 
 
    margin-bottom: 2%; 
 
    margin-top: 2%; 
 
    text-align: center; 
 
} 
 

 
#timeline li + li { 
 
\t margin-left: 2%; 
 
} 
 

 
#timeline li h3, 
 
#timeline li em { 
 
\t display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <title>My Website</title> 
 
\t <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
 
     rel="stylesheet"> 
 
\t <link href="styles.css" rel = "stylesheet" type = "text/css"> 
 
    </head> 
 
    
 
    <body> 
 
    
 
\t <nav class="navbar navbar-default"> 
 
\t \t <div class="container-fluid"> 
 
\t \t \t <ul class="nav navbar-nav"> 
 
\t \t \t \t <li><a href="#">LinkedIn</a></li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </nav> 
 
    
 
\t <div class="jumbotron text-center"> 
 
\t \t <h1>My Name</h1> 
 
\t </div> 
 
\t 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-md-12"> 
 
\t \t \t \t <h1>What I've Been Up To</h1> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t <!--Timeline--> 
 
\t \t <div class="row" style="overflow:auto"> 
 
\t \t \t <ul id="timeline"> 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>Graduated from College</h3> 
 
\t \t \t \t \t <em>May 24, 2012</em> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>Started my first job</h3> 
 
\t \t \t \t \t <em>June 30, 2012</em> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>Started my second job</h3> 
 
\t \t \t \t \t <em>April 3, 2014</em> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>Bought a house!</h3> 
 
\t \t \t \t \t <em>August 12, 2015</em> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>Got married</h3> 
 
\t \t \t \t \t <em>June 3, 2016</em> 
 
\t \t \t \t </li> 
 
\t \t \t \t 
 
\t \t \t \t <li> 
 
\t \t \t \t \t <h3>First child born</h3> 
 
\t \t \t \t \t <em>May 1, 2017</em> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
\t 
 
\t <footer> 
 
\t <p> Copyright &copy; 
 
\t \t <!--Script displays the current year--> 
 
\t \t <script type="text/javascript"> 
 
\t \t var d = new Date() 
 
\t \t document.write(d.getFullYear()) 
 
\t \t </script> 
 
\t </p> 
 
\t </footer> 
 
    </body> 
 

 
</html>

来源

2017-05-25 15:06:40

感谢您的帮助！我将开始更多地关注Chrome开发者工具。在你建议这样做后，我能够弄清楚如何检查不同的元素并看到填充。 – bavenafu

我想说明的是，填充来自默认浏览器样式的'ul'。重置浏览器样式通常是不可取的，特别是对于有序和无序列表。 – hungerstar

为了让那些李真的卡在你的元素的左手边，你需要首先从UL中删除填充和边距，然后在李的边缘右边而不是左边。你的问题的

#timeline { 
    list-style: none; 
    white-space: nowrap; 
    overflow: auto; 
    margin: 0; 
    padding: 0; 
} 

#timeline li { 
    display: inline-block; 
    padding: 1.5%; 
    border: 1px solid #d1d2d3; 
    margin-right: 2%; 
    margin-bottom: 2%; 
    margin-top: 2%; 
    text-align: center; 
}

来源

2017-05-25 15:07:49 Doug

部分是列表元素的margin-left，是的。你可以像这样删除第一个：#timeline li:first-child { margin-left: 0; }。此外，默认情况下，ul本身具有填充左侧，您可以像这样删除它：#timeline { padding-left: 0; }。

来源

2017-05-25 15:08:23 sorayadragon

您需要在此添加到CSS：

#timeline li:first-child { 
    margin-left:0 
}

并改变这个CSS的时间表元素：

#timeline { 
    list-style:none; 
    white-space:nowrap; 
    overflow:auto; 
    padding: 0; 
}

完蛋了！

来源

2017-05-25 15:09:26

除了在时间表ID中省略了padding-left:0px;之外，您已拥有所有内容！

干得好，看起来不错！

.navbar { 
 
    margin-bottom: 0px; 
 
} 
 

 
.jumbotron { 
 
    margin-bottom: 0px; 
 
} 
 

 
#timeline { 
 
    list-style: none; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    padding-left: 0px; 
 
} 
 

 
#timeline li { 
 
    display: inline-block; 
 
    padding: 1.5%; 
 
    border: 1px solid #d1d2d3; 
 
    margin-left: 2%; 
 
    margin-bottom: 2%; 
 
    margin-top: 2%; 
 
    text-align: center; 
 
} 
 

 
#timeline li h3, 
 
#timeline li em { 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>My Website</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">LinkedIn</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 

 
    <div class="jumbotron text-center"> 
 
    <h1>My Name</h1> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <h1>What I've Been Up To</h1> 
 
     </div> 
 
    </div> 
 

 
    <!--Timeline--> 
 
    <div class="row" style="overflow:auto"> 
 
     <ul id="timeline"> 
 
     <li> 
 
      <h3>Graduated from College</h3> 
 
      <em>May 24, 2012</em> 
 
     </li> 
 

 
     <li> 
 
      <h3>Started my first job</h3> 
 
      <em>June 30, 2012</em> 
 
     </li> 
 

 
     <li> 
 
      <h3>Started my second job</h3> 
 
      <em>April 3, 2014</em> 
 
     </li> 
 

 
     <li> 
 
      <h3>Bought a house!</h3> 
 
      <em>August 12, 2015</em> 
 
     </li> 
 

 
     <li> 
 
      <h3>Got married</h3> 
 
      <em>June 3, 2016</em> 
 
     </li> 
 

 
     <li> 
 
      <h3>First child born</h3> 
 
      <em>May 1, 2017</em> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <footer> 
 
    <p> Copyright &copy; 
 
     <!--Script displays the current year--> 
 
     <script type="text/javascript"> 
 
     var d = new Date() 
 
     document.write(d.getFullYear()) 
 
     </script> 
 
    </p> 
 
    </footer> 
 
</body> 
 

 
</html>

来源

2017-05-25 15:09:58

是的，0是无单位的，所以它可以是'padding-left：0;'.... :) –

@cale_b好点！ –

左对齐水平列表的元素

回答

相关问题