左對齊水平列表的元素

我有一個列表，我用它作爲水平時間軸。但是，我在嘗試左對齊列表時遇到問題，因此第一個元素與滾動條的左側齊平。我知道問題的一部分是我有一套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好點！ –

左對齊水平列表的元素

回答

相關問題