html - 如何设计 "metro line"没有站名或线路名覆盖的css布局

标签 html css less

我有一系列地铁线路和车站。我要做的是在线路的上部中心显示线路名,在站的正下方显示站名,线路和站相连。 重要的是线路名不能超过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/

相关文章:

javascript - Radio + Checkbox 值,但 Radio 按钮无限期地对 onclick 求和。为什么? (带一个片段)

html - 避免为 html 设置全局类

css - 较低的百分比无法正常工作

jquery - 滚动经过 DIV 时将类添加到侧边栏

javascript - Jquery 回调未在 Bootstrap 选项卡中触发

html - 使用 HTML 和 CSS 的响应式分屏

html - IE8 支持 Bootstrap3 + LESS

css - LESS:合并具有相同值的属性(规则)

java - html 使用 switch() JS 以相同的形式绘制提交表单

javascript - 普通javascript触发css淡出,ajax加载内容,使用CSS淡入