我有一系列地铁线路和车站。我要做的是在线路的上部中心显示线路名
,在站的正下方显示站名
,线路和站相连。
重要的是线路名不能超过line,不能覆盖其他线路名
,站名也不能覆盖其他站名
,无论多长车站名称或线路名称是。
现在的问题是站名过长会覆盖其他站名。
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.main{
margin-top: 32px;
margin-left: 32px;
display: flex;
flex-direction: row;
justify-content: left;
align-items: center;
}
.line{
height: 2px;
min-width: 32px;
border-bottom: 2px solid;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.line-name{
margin: -20px 16px 0;
}
.station{
height: 8px;
width: 8px;
border-radius: 50%;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.station-name {
margin: 0 16px -20px;
white-space: nowrap;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="main">
<div class="station">
<span class="station-name">first station</span>
</div>
<div class="line">
<span class="line-name">short line</span>
</div>
<div class="station">
<span class="station-name">loooooong station name</span>
</div>
<div class="line">
<span class="line-name">very very very very loooooooong line name</span>
</div>
<div class="station">
<span class="station-name">this on name</span>
</div>
</div></code></pre>
</div>
</div>
Target effect is here 当前代码在这里:https://jsfiddle.net/ueq21afw/ , 和站名相互覆盖。 有人可以帮我解决这个问题吗?谢谢。
最佳答案
我尝试以其他方式构建 html 代码。 https://jsbin.com/gapecapopo/edit?html,css,output
.main {
display: flex;
}
.column {
/* flex: 1; */
background-color: #EEE;
flex-grow: 1;
}
.line {
border-bottom: 2px solid #000;
}
.line::before {
content: 'o';
position:relative;
bottom: -8px;
}
.station-name {
text-align: center;
}
<div class="main">
<div class="column">
<div class="station-name">This station aaaa have very long name</div>
<div class="line"></div>
<div class="line-name">line a</div>
</div>
<div class="column">
<div class="station-name">station b short</div>
<div class="line"></div>
<div class="line-name">line b</div>
</div>
<div class="column">
<div class="station-name">this station cccc have very long nameee</div>
<div class="line"></div>
<div class="line-name">line c</div>
</div>
</div>
关于html - 如何设计 "metro line"没有站名或线路名覆盖的css布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55606055/