1

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

我遇到的问题如下：

  1. 我不能将 span.year 定位到它的父元素 span.circle 的中间。

  2. 我不能将 span.circle 的工具提示也定位到这个 span.circle 的中间。

当然，我可以使用像素来做到这一点，但是 span.year (1) 和 tooltip (2) 的宽度可以是可变的，如示例所示。

display:table 到 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斌

密码笔

JSFiddle

4

1 回答 1

0

当你不嵌套span.circleand 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;
}

为了补偿工具提示，您必须添加 amargin: 4px并将其删除:hover 

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

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

查看完整的 JSFiddle

于 2013-10-30T22:35:31.337 回答