左对齐水平列表的元素

时间：2017-05-25 15:00:44

标签： html css

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

＆＃13;
＆＃13; 
.navbar {
	margin-bottom:0px;
}

.jumbotron {
	margin-bottom:0px;
}

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

#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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：1)

除了您在时间轴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>

答案 1 :(得分：0)

我强烈建议您学习如何使用浏览器的开发者控制台。对此进行快速检查后发现，FilePickerDialogFragment.java元素的#timeline为40像素。

我删除了该填充，并更改了时间轴项目上的padding-left，以便它只在元素之间放置边距。我是通过使用adjacent sibling selector：

完成的 
margin-left

而且 - 作为旁注，#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 {
	margin-left: 2%;
 }

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

答案 2 :(得分：0)

要让那些Li真正粘在元素的左侧，你需要首先从UL中删除填充和边距，然后在Li上应用边距而不是左边。

#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;
}

enter image description here

答案 3 :(得分：0)

您的部分问题是列表元素上的margin-left，是的。您可以删除第一个，如下所示：#timeline li:first-child { margin-left: 0; }。此外，ul默认情况下左侧有填充，您可以将其删除，如下所示：#timeline { padding-left: 0; }。

答案 4 :(得分：0)

您需要将此添加到css：

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

并为时间轴元素更改此css：

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

就是这样！

相关问题
最新问题