1
私は水平のタイムラインとして使用しているリストを持っています。しかし、最初の要素がスクロールバーの左側で一杯になるように、リストを左揃えするのに問題があります。私は問題の一部は、私はセット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 ©
\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>
あなたは垂直または左に整列させるために 'li'の内容として水平' li'を意味ですか？ –