Я хотел бы, чтобы мой текст располагался над каждым кругом! Он занимает всего 40 пикселей в ширину и идет вправо, и это не удивительно. Я действительно запутался в том, как центрировать текст над кружком.

Заранее спасибо! :)

$('.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 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>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>
-1
user3761024 13 Дек 2016 в 22:59

3 ответа

Лучший ответ

Правильным способом является использование CSS-преобразований. Это учитывает жидкое расположение.

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

Я просто изменил правило CSS для div#timeline .dot date следующим образом:

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%);
}
1
Ovi Trif 13 Дек 2016 в 20:48

Наконец-то решение Ovi-Trif работает отлично. Спасибо всем участникам, которые внесли свой вклад в эту полезную помощь, и благодаря stackoverflow :)

0
user3761024 13 Дек 2016 в 20:34

Вы можете удалить неразрывные пробелы и использовать класс для увеличения многострочных элементов ......

$('.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
Scott 13 Дек 2016 в 20:09