更改一個元素上的邊框寬度而不移動兄弟

我想用css按鈕做一些事情，但是當用戶按下按鈕時，兄弟按鈕只會移動一點。更改一個元素上的邊框寬度而不移動兄弟

由於邊界半徑，我無法使用輪廓。

任何想法如何解決這個問題？

一個例子：

.main-body { 
 
    background-color: gray; 
 
    width: 50vw; 
 
    height: 50vw; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.button { 
 
    border-radius: 20px; 
 
    border-style: solid; 
 
    border-color: red; 
 
    border-width: 0 2vw 2vw 0; 
 
    font-size: large; 
 
    margin: 4%; 
 
    width: 40%; 
 
    height: 40%; 
 
    transition: width 0.1s, height 0.1s, border 0.1s, margin 0.1s; 
 
} 
 

 
.button:focus { 
 
    outline: 0; 
 
} 
 

 
.button:active { 
 
    border-width: 0; 
 
    width: calc(40% - 2vw); 
 
    height: calc(40% - 2vw); 
 
    margin-top: calc(4% + 2vw); 
 
    margin-left: calc(4% + 2vw); 
 
}

<body> 
 
    <div class="main-body"> 
 
    <button class="button">1</button> 
 
    <button class="button">2</button> 
 
    <button class="button">3</button> 
 
    <button class="button">4</button> 
 
    </div> 
 
</body>

來源

2017-08-30 Dima T.

添加vertical-align: bottom;到.button

.main-body { 
 
    background-color: gray; 
 
    width: 50vw; 
 
    height: 50vw; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.button { 
 
    vertical-align: bottom; /* now bottoms will align so no buttons will move */ 
 
    border-radius: 20px; 
 
    border-style: solid; 
 
    border-color: red; 
 
    border-width: 0 2vw 2vw 0; 
 
    font-size: large; 
 
    margin: 4%; 
 
    width: 40%; 
 
    height: 40%; 
 
    transition: width 0.1s, height 0.1s, border 0.1s, margin 0.1s; 
 
} 
 

 
.button:focus { 
 
    outline: 0; 
 
} 
 

 
.button:active { 
 
    border-width: 0; 
 
    width: calc(40% - 2vw); 
 
    height: calc(40% - 2vw); 
 
    margin-top: calc(4% + 2vw); 
 
    margin-left: calc(4% + 2vw); 
 
}

<body> 
 
    <div class="main-body"> 
 
    <button class="button">1</button> 
 
    <button class="button">2</button> 
 
    <button class="button">3</button> 
 
    <button class="button">4</button> 
 
    </div> 
 
</body>

來源

2017-08-30 12:28:27

嘗試下面的代碼，更改

.button:active { 
    margin-top: calc(4% + 2vw); 
    }

到

.button:active { 
    top: calc(4% + 2vw); 
    }

.main-body { 
 
    background-color: gray; 
 
    width: 50vw; 
 
    height: 50vw; 
 
    text-align: center; 
 
    margin: auto; 
 
} 
 

 
.button { 
 
    border-radius: 20px; 
 
    border-style: solid; 
 
    border-color: red; 
 
    border-width: 0 2vw 2vw 0; 
 
    font-size: large; 
 
    margin: 4%; 
 
    width: 40%; 
 
    height: 40%; 
 
    transition: width 0.1s, height 0.1s, border 0.1s, margin 0.1s; 
 
} 
 

 
.button:focus { 
 
    outline: 0; 
 
} 
 

 
.button:active { 
 
    border-width: 0; 
 
    width: calc(40% - 2vw); 
 
    height: calc(40% - 2vw); 
 
    top: calc(4% + 2vw); 
 
    margin-left: calc(4% + 2vw); 
 
    
 
}

<body> 
 
    <div class="main-body"> 
 
    <button class="button">1</button> 
 
    <button class="button">2</button> 
 
    <button class="button">3</button> 
 
    <button class="button">4</button> 
 
    </div> 
 
</body>

來源

2017-08-30 12:30:01 Santhoshkumar

更改一個元素上的邊框寬度而不移動兄弟

回答

相關問題