我有絕對定位的內圓，并且我成功地將它們居中，如下所示。最小的圓內也有文本居中。https://i.stack.imgur.com/5lHKK.png 問題是當我想讓它響應時，這也會減少寬度。滾動條發生了我不想要的情況，并顯示為紅色標簽。我希望在減少寬度時從左側和右側裁剪我的圓圈。我怎樣才能做到這一點？https://i.stack.imgur.com/JPJHG.png body{background-color:blue;} #first-circle { border-radius: 50%; width: 643px; height: 643px; border: 1px solid #FFFFFF; position: absolute; top:28px; border: 1px solid rgba(255, 255, 255); left: 50%; transform: translate(-50%,0); } #second-circle { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255); width: 508px; height: 508px; top: 50%; left: 50%; margin: -254px 0px 0px -254px; } #third-circle { position: absolute; width: 382px; height: 382px; border: 1px solid rgba(255, 255, 255); box-sizing: border-box; border-radius: 50%; top: 50%; left: 50%; margin: -191px 0px 0px -191px; } #fourth-circle { position: absolute; width: 254px; height: 254px; border: 1px solid rgba(255, 255, 255); box-sizing: border-box; border-radius: 50%; top: 50%; left: 50%; margin: -127px 0px 0px -127px; } #fifth-circle { position: absolute; font-size:14px; width: 128px; height: 128px; text-align: center; color:#fff; border: 1px solid rgba(255, 255, 255,.8); box-sizing: border-box; border-radius: 50%; top: 50%; left: 50%; margin: -64px 0px 0px -64px; }
3 回答
萬千封印
TA貢獻1891條經驗 獲得超3個贊
像素是最差的單位， 如果您希望文本適合最小的圓圈，則
可以使用，您可以分別為它們分配更大的值vh
body{
background-color:blue;
}
#first-circle {
border-radius: 50%;
width: 90vh;
height: 90vh;
border: 1px solid #FFFFFF;
position: absolute;
top:28px;
border: 1px solid rgba(255, 255, 255);
left: 50%;
transform: translate(-50%,0) , scale(2);
}
#second-circle {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255);
width: 70vh;
height: 70vh;
top: 10vh;
left: 10vh;
}
#third-circle {
position: absolute;
width: 50vh;
height: 50vh;
top: 10vh;
left: 10vh;
border: 1px solid rgba(255, 255, 255);
box-sizing: border-box;
border-radius: 50%;
}
#fourth-circle {
position: absolute;
width: 30vh;
height: 30vh;
top: 10vh;
left: 10vh;
border: 1px solid rgba(255, 255, 255);
box-sizing: border-box;
border-radius: 50%;
}
#fifth-circle {
position: absolute;
font-size:14px;
width: 10vh;
height: 10vh;
top: 10vh;
left: 10vh;
text-align: center;
color:#fff;
border: 1px solid rgba(255, 255, 255,.8);
box-sizing: border-box;
border-radius: 50%;
}
.text-container{
margin-top:0px;
font-size: 1em;
}
<div id="first-circle">
<div id="second-circle" >
<div id="third-circle" >
<div id="fourth-circle">
<div id="fifth-circle">
<div class="text-container">
</div>
</div>
</div>
</div>
</div>
</div>
- 3 回答
- 0 關注
- 228 瀏覽
添加回答
舉報
0/150
提交
取消