我有一条垂直的时间线，我需要六边形在中心线上。我的问题是，我知道可以用单独的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>
答案 0 :(得分：1)
从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>