如何在每个按钮上方设置长弦？

时间：2016-12-13 19:59:48

标签： javascript html css

我想将我的文字放在每个圆圈的中心位置！它只需要40px宽度并向右移动，这不是很好。我真的很困惑如何将文本置于圆圈上方。

提前谢谢！ ：）

＆＃13;
＆＃13; 
$('.dot:nth-child(1)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '10%'
  }, 500);
});
$('.dot:nth-child(2)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '20%'
  }, 500);
});
$('.dot:nth-child(3)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '30%'
  }, 500);
});
$('.dot:nth-child(4)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '40%'
  }, 500);
});
$('.dot:nth-child(5)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '50%'
  }, 500);
});
$('.dot:nth-child(6)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '60%'
  }, 500);
});
$('.dot:nth-child(7)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '70%'
  }, 500);
});
$('.dot:nth-child(8)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '80%'
  }, 500);
});
$('.dot:nth-child(9)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '90%'
  }, 500);
});
＆＃13; 
div#timeline {
  background-color: #6ab0de;
  margin-top: 150px;
  height: 10px;
  width: 100%;
  position: relative;
}
div#timeline .inside {
  position: absolute;
  height: 4px;
  background-color: #fff;
  width: 0%;
  top: 3px;
  left: 0;
}
div#timeline .dot {
  z-index: 99;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  text-align: center;
  cursor: pointer;
}
div#timeline .dot:nth-child(1) {
  left: 10%;
}
div#timeline .dot:nth-child(2) {
  left: 20%;
  background-color: #e74c3c;
}
div#timeline .dot:nth-child(3) {
  left: 30%;
  background-color: #7b3;
}
div#timeline .dot:nth-child(4) {
  left: 40%;
  background-color: #20638f;
}
div#timeline .dot:nth-child(5) {
  left: 50%;
  background-color: #7cdbd5;
}
div#timeline .dot:nth-child(6) {
  left: 60%;
  background-color: #f39c12;
}
div#timeline .dot:nth-child(7) {
  left: 70%;
  background-color: #2c3e50;
}
div#timeline .dot:nth-child(8) {
  left: 80%;
  background-color: #e74c3c;
}
div#timeline .dot:nth-child(9) {
  left: 90%;
  background-color: #7b3;
}
div#timeline .dot:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
div#timeline .dot date {
  font-family: roboto;
  font-size: 1.1rem;
  display: block;
  position: relative;
  top: -60px;
  text-align: center;
}
div#timeline .dot span {
  display: inline-block;
  margin-top: 10px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
＆＃13; 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

<div id="timeline">

  <div class="dot" id="1" style="background-color: #2c3e50;">
    <span></span>
    <date>Page&nbsp;1</date>
  </div>

  <div class="dot" id="2">
    <span></span>
    <date>Page&nbsp;2</date>
  </div>

  <div class="dot" id="3">
    <span></span>
    <date>Large&nbsp;TEXT&nbsp;HERE</date>
  </div>

  <div class="dot" id="4">
    <span></span>
    <date>P4</date>
  </div>

  <div class="dot" id="5">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="6">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="7">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="8">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="9">
    <span></span>
    <date>P5</date>
  </div>

  <div class="inside"></div>

</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

您可以删除不间断的空格并使用类来提升多行项目...... 

$('.dot:nth-child(1)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '10%'
  }, 500);
});
$('.dot:nth-child(2)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '20%'
  }, 500);
});
$('.dot:nth-child(3)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '30%'
  }, 500);
});
$('.dot:nth-child(4)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '40%'
  }, 500);
});
$('.dot:nth-child(5)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '50%'
  }, 500);
});
$('.dot:nth-child(6)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '60%'
  }, 500);
});
$('.dot:nth-child(7)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '70%'
  }, 500);
});
$('.dot:nth-child(8)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '80%'
  }, 500);
});
$('.dot:nth-child(9)').click(function() {
  $('.inside', $(this).parent()).animate({
    'width': '90%'
  }, 500);
});
div#timeline {
  background-color: #6ab0de;
  margin-top: 150px;
  height: 10px;
  width: 100%;
  position: relative;
}
div#timeline .inside {
  position: absolute;
  height: 4px;
  background-color: #fff;
  width: 0%;
  top: 3px;
  left: 0;
}
div#timeline .dot {
  z-index: 99;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  text-align: center;
  cursor: pointer;
}
div#timeline .dot:nth-child(1) {
  left: 10%;
}
div#timeline .dot:nth-child(2) {
  left: 20%;
  background-color: #e74c3c;
}
div#timeline .dot:nth-child(3) {
  left: 30%;
  background-color: #7b3;
}
div#timeline .dot:nth-child(4) {
  left: 40%;
  background-color: #20638f;
}
div#timeline .dot:nth-child(5) {
  left: 50%;
  background-color: #7cdbd5;
}
div#timeline .dot:nth-child(6) {
  left: 60%;
  background-color: #f39c12;
}
div#timeline .dot:nth-child(7) {
  left: 70%;
  background-color: #2c3e50;
}
div#timeline .dot:nth-child(8) {
  left: 80%;
  background-color: #e74c3c;
}
div#timeline .dot:nth-child(9) {
  left: 90%;
  background-color: #7b3;
}
div#timeline .dot:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
div#timeline .dot date {
  font-family: roboto;
  font-size: 1.1rem;
  display: block;
  position: relative;
  top: -60px;
  text-align: center;
}

/* ---------------------------- */
div#timeline .dot date.bump {
  top: -85px; }

/* ------------------ */


div#timeline .dot span {
  display: inline-block;
  margin-top: 10px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  position: relative;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

<div id="timeline">

  <div class="dot" id="1" style="background-color: #2c3e50;">
    <span></span>
    <date>Page&nbsp;1</date>
  </div>

  <div class="dot" id="2">
    <span></span>
    <date>Page&nbsp;2</date>
  </div>

  <div class="dot" id="3">
    <span></span>
    <date class="bump">Large TEXT HERE</date>
  </div>

  <div class="dot" id="4">
    <span></span>
    <date>P4</date>
  </div>

  <div class="dot" id="5">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="6">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="7">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="8">
    <span></span>
    <date>P5</date>
  </div>

  <div class="dot" id="9">
    <span></span>
    <date>P5</date>
  </div>

  <div class="inside"></div>

</div>

当然，您可能还需要断字或连字长。

答案 1 :(得分：1)

正确的方法是使用CSS转换。这允许流畅的布局。

Codepen：http://codepen.io/ovitrif/pen/eBPEVV

我所做的很简单，我修改了div#timeline .dot date的CSS规则，如下所示：

div#timeline .dot date {
  /*
  font-family: roboto;
  font-size: 1.1rem;
  display: block;
  top: -60px;
  text-align: center;
  */
  position: absolute;
  left: 20px; /* This has to be equal with the half of the dot width.*/
  transform: translatex(-50%);
}

答案 2 :(得分：0)

最后，Ovi-Trif的解决方案运行良好。 感谢所有为这个好帮助做出贡献的成员，非常感谢stackoverflow：）

相关问题
最新问题