-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
私は間違いのために申し訳ありません。 – user3761024
あなたの質問、特にタイトルを実際の質問を反映させて[編集]してください。 –