縮水減少頁面的CSS時設置按鈕 - HTML

Question

我有一組按鈕，在HTML：

<div class="controls"> 
    <div id="s-controls"> 
    <button class="control-btn" style="background-color: #2de7f6">1</button> 
    <button class="control-btn" style="background-color: #69a6ea">2</button> 
    <button class="control-btn" style="background-color: #736ace">3</button> 
    <button class="control-btn" style="background-color: #372ac3">4</button> 
    </div> 
</div> 

，我想盡量減少頁面時收縮。現在這樣做時，按鈕保持其大小，設計看起來很混亂。

我已經嘗試了很多與CSS的東西，但我不是很擅長它。這是我到目前爲止：

.controls { 
background-color: #1F1F1F; 
min-height: 50px; 
} 

button { 
margin: 20px auto; 
max-width: 100%; 
} 

#s-controls, #p-controls { 
text-align: center; 
} 

#s-controls > *, #p-controls > * { 
font-family: "Titillium Web", sans-serif; 
font-weight: 600; 
color: white; 
cursor: pointer; 
} 

.control-btn { 
    display: inline-block; 
    /*border-radius: 4px;*/ 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); 
    line-height: 2.5em; 
    padding: 0 3em; 
    text-decoration: none; 
} 

line-height: 1.75em; 
    padding: 0 0.75em; 
} 

.control-btn:hover { 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 
    inset 0 1.5em 1em rgba(255,255,255,0.3); 
} 

我打算在純html和css中做到這一點。這個想法是在某些時候縮小按鈕，以保持最初的一排設計。

任何幫助將升值！

Answer 1

嘗試設置所有容器（＃s-controls，div.controls）的寬度，並設置按鈕的實際寬度，而不僅僅是最大寬度。

div.controls { width: 100%; } 

#s-controls { width: 100%; } 

button { width: 100%; max-width: 100%; } 

Answer 2

對於不同的設備路線，您可以使用媒體查詢。例如，對於移動寬度我已經添加按鈕{寬度：100％重要;}，以便它不會崩潰..

請讓我知道，如果你是不是在找這個

@media screen and (max-width: 480px) { 
 
    button { 
 
\t \t padding: 0 2em !important; 
 
} 
 
    } 
 

 
controls { 
 
background-color: #1F1F1F; 
 
min-height: 50px; 
 
} 
 

 
button { 
 
margin: 20px auto; 
 
max-width: 100%; 
 
} 
 

 
#s-controls, #p-controls { 
 
text-align: center; 
 
} 
 

 
#s-controls > *, #p-controls > * { 
 
font-family: "Titillium Web", sans-serif; 
 
font-weight: 600; 
 
color: white; 
 
cursor: pointer; 
 
} 
 

 
.control-btn { 
 
    display: inline-block; 
 
    /*border-radius: 4px;*/ 
 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); 
 
    line-height: 2.5em; 
 
    padding: 0 3em; 
 
    text-decoration: none; 
 
} 
 

 
line-height: 1.75em; 
 
    padding: 0 0.75em; 
 
} 
 

 
.control-btn:hover { 
 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 
 
    inset 0 1.5em 1em rgba(255,255,255,0.3); 
 
}

<div class="controls"> 
 
    <div id="s-controls"> 
 
    <button class="control-btn" style="background-color: #2de7f6">1</button> 
 
    <button class="control-btn" style="background-color: #69a6ea">2</button> 
 
    <button class="control-btn" style="background-color: #736ace">3</button> 
 
    <button class="control-btn" style="background-color: #372ac3">4</button> 
 
    </div> 
 
</div> 
 

 
.

Answer 3

使用媒體查詢將爲您提供您在不同設備上尋找的操作和/或縮小瀏覽器的操作。

爲你做這個正在尋找所有寬度並相應地調整填充：

@media (max-width:991px){ //change this number to 768px, 560px, 480px, etc 
    .control-btn { 
     padding: 0 2em; 
    } 
} 

Answer 4

你想要的是添加nowrap到容器的按鈕：

#s-controls { white-space: nowrap; } 

但你還需要定義按鈕寬度：

.control-btn { 
    max-width: 90px; 
    width: 24%; 
} 

你可以玩這些值以微調它們。

此外，你有一個額外的結束花括號.control-btn混淆了代碼。刪除它。

padding: 0 3em; 
    text-decoration: none; 
    /* } extra bracket */ 
    line-height: 1.75em; 
    padding: 0 0.75em; 

看到它在fiddle

Answer 5

這是怎麼做的時候屏幕變小他們調整。

現在，您可以使用媒體查詢和媒體查詢寬度中的設置進行播放，以查看其工作原理。

我也將此添加到您的.control-btn規則中，但還有一個響應設置可以根據屏幕大小調整大小，並阻止它們變大。

width: 23%; 
    max-width: 150px; 

.controls { 
 
background-color: #1F1F1F; 
 
min-height: 50px; 
 
} 
 

 
button { 
 
margin: 20px auto; 
 
} 
 

 
#s-controls, #p-controls { 
 
text-align: center; 
 
} 
 

 
#s-controls > *, #p-controls > * { 
 
font-family: "Titillium Web", sans-serif; 
 
font-weight: 600; 
 
color: white; 
 
cursor: pointer; 
 
} 
 

 
.control-btn { 
 
    display: inline-block; 
 
    border-radius: 4px; 
 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); 
 
    line-height: 2.5em; 
 
    padding: 0 1em; 
 
    text-decoration: none; 
 
    width: 23%; 
 
    max-width: 150px; 
 
} 
 

 
.control-btn:hover { 
 
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5), 
 
    inset 0 1.5em 1em rgba(255,255,255,0.3); 
 
} 
 

 
@media (max-width: 500px){ 
 
    .control-btn { 
 
    line-height: 2em; 
 
    padding: 0 0.3em; 
 
    font-size: 70%; 
 
    } 
 
}

<div class="controls"> 
 
    <div id="s-controls"> 
 
    <button class="control-btn" style="background-color: #2de7f6">Rewind</button> 
 
    <button class="control-btn" style="background-color: #69a6ea">Play</button> 
 
    <button class="control-btn" style="background-color: #736ace">Pause</button> 
 
    <button class="control-btn" style="background-color: #372ac3">Forward</button> 
 
    </div> 
 
</div>