我正在嘗試為我的網站創建一個投票系統，但目前正在為 upvote 和 downvote 計數器樣式而苦苦掙扎。這是它現在的樣子：
如您所見，問題在于，每當按鈕右側或左側的數字變大時，它就會推動其他元素。我希望兩個按鈕保持在中心，并且向上投票計數器向左增長，向右向下投票。這樣，一切都將居中。
這是我當前的 CSS 代碼：
.upvoteButtonsContainer{
display: flex;
justify-content: center;
margin-top: 15px;
}
.upvoteButton{
margin-right: 2px;
border: none;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 5px;
font-size: 25px;
}
.downvoteButton{
margin-left: 2px;
border: none;
background-color: transparent;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 5px;
font-size: 25px;
}
.upvoteCounterContainer{
display: block;
direction: rtl;
text-align: right;
}
.downvoteCounterContainer{
display: block;
direction: ltr;
text-align: left;
}
.upvoteCounter{
margin-right: 5px;
}
.downvoteCounter{
margin-left: 5px;
}
還有我的 HTML 代碼：
<div className="homePage">
{imageLists.map((image) => {
return (
<div className="container">
<div className="meme">
<img src={image} className="meme-img"></img>
</div>
<div className="upvoteButtonsContainer">
<div className="upvoteCounterContainer">
<span className="upvoteCounter">120</span>
</div>
<button type="button" className="upvoteButton">
??
</button>
<button type="button" className="downvoteButton">
??
</button>
<div className="downvoteCounterContainer">
<span className="downvoteCounter">1241123123310</span>
</div>
</div>
</div>
);
})}
</div>
謝謝！
uj5u.com熱心網友回復：
如果您總是希望按鈕居中并且不關心數字為例外大的數字換行，您可以position: absolute很容易地解決這個問題：
.upvoteButton{
position: relative;
}
.downvoteButton{
position: relative;
}
.upvoteCounterContainer{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: calc(100% 5px);
}
.downvoteCounterContainer{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(100% 5px);
}
然后將計數器包裹在按鈕內：
<div className="upvoteButtonsContainer">
<button type="button" className="upvoteButton">
??
<div className="upvoteCounterContainer">
<span className="upvoteCounter">120</span>
</div>
</button>
<button type="button" className="downvoteButton">
??
<div className="downvoteCounterContainer">
<span className="downvoteCounter">1241123123310</span>
</div>
</button>
</div>
額外更改：您可以洗掉所有文本對齊/方向樣式如果這不能正常作業，您可以嘗試將圖示放在特定容器中（Divs/spans）如果計數器沒有自動寬度（它們的寬度不會根據它們的內容增長）你可以計算并給它們一個固定值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/485827.html
標籤：javascript html css 反应 网络