Question

我正在做一种水平时间表。

我遇到的问题如下：

我无法将span.year定位到它的父元素span.circle的中间。
我无法将span.circle的工具提示也放在span.circle的中间位置。

当然我可以使用像素来做到这一点，但是span.year（1）和tooltip（2）的宽度可以是流动的，例如。

显示：不能使用span.circle表，因为它是css中的圆圈。如果我把span.year放在span.circle之后并使用display：table到li.year我会遇到边距问题。

实际上，关于span.year，它可以是li.year的孩子而不是span.circle。这没关系，所以如果有一个更好的选择选择父母li.year，它可以是这样。

请在演示（JSFiddle / JSBin）中调整结果窗口大小以查看正确的结果。

小点（月份）悬停时显示工具提示。

提前致谢！

HTML

<div class="timeline-wrap">
  <ul class="timeline">
    <li class="year inactive">
      <span class="circle">
        <span class="year">1979-2012</span>
      </span>
    </li>
    <li class="line inactive">
      <span class="line"></span>
    </li>
    <li class="year active">
      <span class="circle">
        <span class="year">1980</span>
      </span>
      <span class="current"></span>
    </li>
    <li class="line inactive">
      <span class="line"></span>
    </li>
    <li class="year active start">
      <span class="circle">
        <span class="year">1981</span>
      </span>
      <span class="start"></span>
      <ul class="year-month">
        <li class="line active">
          <span class="line"></span>
        </li>
        <li class="month">
          <span class="circle" title="june-july"></span>
          <span class="current"></span>
        </li>
        <li class="line active">
          <span class="line"></span>
        </li>
        <li class="month">
          <span class="circle" title="july-august"></span>
        </li>
        <li class="line active">
          <span class="line"></span>
        </li>
        <li class="month">
          <span class="circle" title="august-september"></span>
        </li>
        <li class="line active">
          <span class="line"></span>
        </li>
        <li class="month">
          <span class="circle" title="september-october"></span>
        </li>
        <li class="line active">
          <span class="line"></span>
        </li>
      </ul>
    </li>
    <li class="year inactive end">
      <span class="circle">
        <span class="year">1982</span>
      </span>
      <span class="end"></span>
    </li>
    <li class="line inactive">
      <span class="line"></span>
    </li>
    <li class="year inactive">
      <span class="circle">
        <span class="year">1983</span>
      </span>
    </li>
    <li class="line inactive">
      <span class="line"></span>
    </li>
    <li class="year active">
      <span class="circle">
        <span class="year">1984</span>
      </span>
      <span class="current"></span>
    </li>
    <li class="line inactive">
      <span class="line"></span>
    </li>
    <li class="year inactive">
      <span class="circle">
        <span class="year">1985</span>
      </span>
    </li>
  </ul>
</div>

CSS

.timeline-wrap {
  width: 100%;
}
.timeline-wrap ul.timeline {
  box-sizing: border-box;
  padding-left: 264px;
  list-style: none;
  height: 80px;
  background-color: rgba(54, 54, 54, 0.5);
  width: 100%;
  position: relative;
}
.timeline-wrap ul.timeline li {
  display: block;
  float: left;
}
.timeline-wrap ul.timeline li.year {
  width: 13px;
  height: 100%;
  margin: 0 3px;
  position: relative;
}
.timeline-wrap ul.timeline li.year .circle {
  margin-top: 47px;
  width: 1px;
  height: 1px;
  background-color: #f2f2f2;
  border: 6px solid rgba(242, 242, 242, 0.3);
  border-radius: 50%;
  display: block;
  float: left;
  position: absolute;
  z-index: 100;
}
.timeline-wrap ul.timeline li.year .circle:hover {
  cursor: pointer;
  margin-top: 43px;
  margin-left: -4px;
  width: 13px;
  height: 13px;
  background-color: #f2f2f2;
  border: 4px solid #363636;
}
.timeline-wrap ul.timeline li.year .circle span.year {
  display: block;
  float: left;
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  position: absolute;
  white-space: nowrap;
  z-index: 100;
  top: -30px;
}
.timeline-wrap ul.timeline li.year.active span.current {
  position: absolute;
  margin-left: 6px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  height: 75px;
  top: 0;
  z-index: 99;
}
.timeline-wrap ul.timeline li.year.active span.current:after {
  border: solid;
  border-color: rgba(255, 255, 255, 0.4) transparent;
  border-width: 0 6px 6px 6px;
  bottom: -5px;
  content: "";
  left: -6px;
  position: absolute;
  z-index: 100;
}
.timeline-wrap ul.timeline li.year.active .circle {
  border-color: #ffffff;
}
.timeline-wrap ul.timeline li.year.active .circle:hover {
  border-color: #363636;
}
.timeline-wrap ul.timeline li.year.active.start {
  width: auto;
}
.timeline-wrap ul.timeline li.year.active .start {
  position: absolute;
  margin-left: 6px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.8);
  height: 100%;
  z-index: 99;
}
.timeline-wrap ul.timeline li.year.active ul.year-month {
  background-color: rgba(255, 255, 255, 0.3);
  display: block;
  float: left;
  box-sizing: border-box;
  margin-left: 6px;
  padding-left: 10px;
  padding-right: 2px;
  height: 100%;
  width: 100%;
}
.timeline-wrap ul.timeline li.year.active ul.year-month li.month {
  height: 100%;
  width: 9px;
  margin: 0 3px;
  display: inline;
  position: relative;
}
.timeline-wrap ul.timeline li.year.active ul.year-month li.month:last-child {
  position: absolute;
}
.timeline-wrap ul.timeline li.year.active ul.year-month li.month span.circle {
  margin-top: 49px;
  width: 1px;
  height: 1px;
  border: 4px solid #f2f2f2;
  border-radius: 50%;
  display: block;
  float: left;
}
.timeline-wrap ul.timeline li.year.active ul.year-month li.month span.circle:hover {
  margin-top: 43px;
  margin-left: -6px;
  width: 13px;
  height: 13px;
  border: 4px solid #363636;
}
.timeline-wrap ul.timeline li.year.active ul.year-month li.month span.circle:hover:after {
  background: #363636;
  background: rgba(54, 54, 54, 0.95);
  box-sizing: border-box;
  bottom: 27px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: #ffffff;
  text-transform: capitalize;
  content: attr(title);
  text-align: center;
  padding: 5px 15px;
  position: absolute;
  z-index: 100;
  white-space: nowrap;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
}
.timeline-wrap ul.timeline li.year.active ul.year-month li.month span.circle:hover:before {
  border: solid;
  border-color: rgba(54, 54, 54, 0.95) transparent;
  border-width: 7px 7px 0 7px;
  bottom: 20px;
  content: "";
  left: -1px;
  position: absolute;
  z-index: 102;
}
.timeline-wrap ul.timeline li.year.active ul.year-month li.month span.current {
  margin-left: 4px;
}
.timeline-wrap ul.timeline li.year.end {
  margin-left: -3px;
}
.timeline-wrap ul.timeline li.year.end span.end {
  position: absolute;
  margin-left: 5px;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.8);
  height: 100%;
  z-index: 99;
}
.timeline-wrap ul.timeline li.line {
  margin-top: 53px;
  width: 60px;
  height: 1px;
  background-color: #363636;
  opacity: 0.5;
}
.timeline-wrap ul.timeline li.line.active {
  background-color: #ffffff;
}

演示：

JS Bin

Codepen

JSFiddle

Answer 1

当你没有嵌套span.circle和span.year时，却把它放在同一水平上

<li class="year">
    <span class="year">1979-2012</span>
    <span class="circle"></span>
</li>

你可以将li.year

放在中心

li.year span.circle {
    display: block;
    margin: 0 auto;
}

li.year span.year {
    display: block;
    margin: 0 auto;
}

要补偿工具提示，您必须添加margin: 4px并将其移除:hover

li.year span.circle {
    display: block;
    margin: 4px auto;
}

li.year span.circle:hover {
    margin: 0 auto;
}

查看完整的JSFiddle

居中子元素和工具提示，位于绝对位置，具有流体宽度，相对于较小尺寸的父级

1 个答案: