我有一个垂直时间轴，我需要六边形在中心线上。我的问题是，我知道它可以使用单独的CSS工作表完成，但我有顺序使用内联CSS，并且六边形无法对齐。 （我知道这看起来很可怕，但这就是我要做的......）
六边形id是“标记”。
这是我在codepen中的代码：https://codepen.io/thedude93/pen/ROWZRj
<div style="-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;">
<style>#container:before {content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
width: 2px;
height: 100%;
background: #CCD1D9;
z-index: -1}</style>
<div id="container" style="width: 80%;
padding: 50px 0;
margin: 50px auto;
position: relative;
overflow: hidden;">
<div id="right" style="width: -webkit-calc(50% + 8px);
width: -moz-calc(50% + 8px);
width: calc(50% + 8px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
clear: both;
float: right">
<div id="marker"><span style="color: #05bf85;
font-size: 30px;
margin-left: auto;
margin-right: auto">⬢</span></div>
<div style=" width: 95%;
padding: 0 15px;
color: #666;">
<h3 style="margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 500">march 26.</h3>
<span style="font-size: 15px;
color: #a4a4a4;"><a href="https://www.ispor.org/conferences-education/conferences/upcoming-conferences/ispor-warsaw-2019" target=_blank >ISPOR Warsaw 2019, Varsó, Lengyelország</a></span>
<p style="font-size: 14px; line-height: 1.5em; word-spacing: 1px;color: #888;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div id="left" style="width: -webkit-calc(50% + 8px);
width: -moz-calc(50% + 8px);
width: calc(50% + 8px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
clear: both;
float: left;
transform: scaleX(-1)">
<div id="marker"><span style="color: #05bf85;
font-size: 30px;
">⬢</span></div>
<div style=" width: 95%;
padding: 0 15px;
color: #666;
text-align:right;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);">
<h3 style="margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 500">april 1.</h3>
<span style="font-size: 15px;
color: #a4a4a4;"><a href="https://www.eunethta.eu/2019-eunethta-forum/" target=_blank >Lorem ipsum dolor sit amet</a></span>
<p style="font-size: 14px;
line-height: 1.5em;
word-spacing: 1px;
color: #888;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div id="right" style="width: -webkit-calc(50% + 8px);
width: -moz-calc(50% + 8px);
width: calc(50% + 8px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
clear: both;
float: right">
<div id="marker"><span style="color: #05bf85;
font-size: 30px;
">⬢</span></div>
<div style=" width: 95%;
padding: 0 15px;
color: #666;">
<h3 style="margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 500">april 4.</h3>
<span style="font-size: 15px;
color: #a4a4a4;"><a href="https://meta2019.misandbos.hu/" target=_blank >Lorem ipsum dolor sit amet</a></span>
<p style="font-size: 14px;
line-height: 1.5em;
word-spacing: 1px;
color: #888;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
<div id="left" style="width: -webkit-calc(50% + 8px);
width: -moz-calc(50% + 8px);
width: calc(50% + 8px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
clear: both;
float: left;
transform: scaleX(-1)">
<div id="marker"><span style="color: #05bf85;
font-size: 30px;
">⬢</span></div>
<div style=" width: 95%;
padding: 0 15px;
color: #666;
text-align:right;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);">
<h3 style="margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 500">june 4.</h3>
<span style="font-size: 15px;
color: #a4a4a4;"><a href="https://www.htai2019.org/" target=_blank >Lorem ipsum dolor sit amet</a></span>
<p style="font-size: 14px;
line-height: 1.5em;
word-spacing: 1px;
color: #888;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>
从width: calc(50% + 12px);更改你的CSS width: calc(50% + 8px);
<div style="-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;">
<style>#container:before {content: '';
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
width: 2px;
height: 100%;
background: #CCD1D9;
z-index: -1}</style>
<div id="container" style="width: 80%;
padding: 50px 0;
margin: 50px auto;
position: relative;
overflow: hidden;">
<div id="right" style="width: -webkit-calc(50% + 12px);
width: -moz-calc(50% + 12px);
width: calc(50% + 12px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
clear: both;
float: right">
<div id="marker"><span style="color: #05bf85;
font-size: 30px;
margin-left: auto;
margin-right: auto">⬢</span></div>
<div style=" width: 95%;
padding: 0 15px;
color: #666;">
<h3 style="margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 500">march 26.</h3>
<span style="font-size: 15px;
color: #a4a4a4;"><a href="https://www.ispor.org/conferences-education/conferences/upcoming-conferences/ispor-warsaw-2019" target=_blank >ISPOR Warsaw 2019, Varsó, Lengyelország</a></span>
<p style="font-size: 14px; line-height: 1.5em; word-spacing: 1px;color: #888;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div id="left" style="width: -webkit-calc(50% + 12px);
width: -moz-calc(50% + 12px);
width: calc(50% + 12px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
clear: both;
float: left;
transform: scaleX(-1)">
<div id="marker"><span style="color: #05bf85;
font-size: 30px;
">⬢</span></div>
<div style=" width: 95%;
padding: 0 15px;
color: #666;
text-align:right;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);">
<h3 style="margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 500">april 1.</h3>
<span style="font-size: 15px;
color: #a4a4a4;"><a href="https://www.eunethta.eu/2019-eunethta-forum/" target=_blank >Lorem ipsum dolor sit amet</a></span>
<p style="font-size: 14px;
line-height: 1.5em;
word-spacing: 1px;
color: #888;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
<div id="right" style="width: -webkit-calc(50% + 12px);
width: -moz-calc(50% + 12px);
width: calc(50% + 12px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
clear: both;
float: right">
<div id="marker"><span style="color: #05bf85;
font-size: 30px;
">⬢</span></div>
<div style=" width: 95%;
padding: 0 15px;
color: #666;">
<h3 style="margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 500">april 4.</h3>
<span style="font-size: 15px;
color: #a4a4a4;"><a href="https://meta2019.misandbos.hu/" target=_blank >Lorem ipsum dolor sit amet</a></span>
<p style="font-size: 14px;
line-height: 1.5em;
word-spacing: 1px;
color: #888;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
<div id="left" style="width: -webkit-calc(50% + 12px);
width: -moz-calc(50% + 12px);
width: calc(50% + 12px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
clear: both;
float: left;
transform: scaleX(-1)">
<div id="marker"><span style="color: #05bf85;
font-size: 30px;
">⬢</span></div>
<div style=" width: 95%;
padding: 0 15px;
color: #666;
text-align:right;
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);">
<h3 style="margin-top: 5px;
margin-bottom: 5px;
font-size: 25px;
font-weight: 500">june 4.</h3>
<span style="font-size: 15px;
color: #a4a4a4;"><a href="https://www.htai2019.org/" target=_blank >Lorem ipsum dolor sit amet</a></span>
<p style="font-size: 14px;
line-height: 1.5em;
word-spacing: 1px;
color: #888;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>