-1
我想保持我的文本以上每個圓圈爲中心！它只需要40px的寬度，往右走，這並不是很好。我對如何將文字居中放置在圓上感到困惑。如何在每個按鈕上方放置一個長字符串？
預先感謝您！ :)
$('.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 1</date>
</div>
<div class="dot" id="2">
<span></span>
<date>Page 2</date>
</div>
<div class="dot" id="3">
<span></span>
<date>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>
HTML中沒有按鈕。 – krillgar
我的意思是cercles :)抱歉誤導。 – user3761024
請[編輯]您的問題，尤其是標題，以反映您的實際問題。 –