HTML5 - 按鈕寬度不一樣

Question

我試圖讓我的按鈕具有相同的寬度，但由於某種原因，它不工作。需要爲了做什麼，以確保所有按鈕符合這些期望的結果？：

1. 所有按鈕都必須具有相同的寬度
2. 所有按鍵不能使用頁面

的整個寬度

具有相同的寬度

/*File download button*/ 
 

 
.buttonFileDownload_container { 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
} 
 

 
.buttonFileDownload { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 10px 60px; 
 
    background-color: transparent; 
 
    border: 3px solid black; 
 
    color: black; 
 
    text-decoration: none!important; 
 
    font-size: 1.5em; 
 
    line-height: 1.2; 
 
    text-align: center; 
 
    text-indent: 15px; 
 
} 
 

 
.buttonFileDownload:before, 
 
.buttonFileDownload:after { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 52%; 
 
} 
 

 

 
/* Download box shape */ 
 

 
.buttonFileDownload:before { 
 
    width: 20px; 
 
    height: 4px; 
 
    border-style: solid; 
 
    border-width: 0 4px 4px; 
 
} 
 

 

 
/* Download arrow shape */ 
 

 
.buttonFileDownload:after { 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 6px; 
 
    margin-top: -140px; 
 
    border-style: solid; 
 
    border-width: 8px 8px 0 8px; 
 
    border-color: transparent; 
 
    border-top-color: inherit; 
 
    animation: downloadArrow 2s linear infinite; 
 
    animation-play-state: paused; 
 
} 
 

 
.buttonFileDownload:hover:before { 
 
    border-color: black; 
 
} 
 

 
.buttonFileDownload:hover:after { 
 
    border-top-color: black; 
 
    animation-play-state: running; 
 
} 
 

 

 
/* keyframes for the download icon anim */ 
 

 
@keyframes downloadArrow { 
 
    /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */ 
 
    0% { 
 
    margin-top: -14px; 
 
    opacity: 1; 
 
    } 
 
    0.001% { 
 
    margin-top: -30px; 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    margin-top: 0; 
 
    opacity: 0; 
 
    } 
 
}

<p>Hello World</p> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Numbers</u><br/> 
 
     Numbers description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Colours</u><br/> 
 
     Colours description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/> 
 
     Onomatopoeia description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/> 
 
     Alphabet description</a> 
 
</div>

Answer 1

1. 所有按鈕都必須具有相同寬度
2. 所有按鈕不得使用整個頁面寬度

主要技巧是在標記中添加一個包裝器，一個新的CSS規則並將buttonFileDownload設置爲display: block。

.buttonFileDownload_wrapper {   /* added rule  */ 
    display: inline-block; 
} 

.buttonFileDownload { 
    display: block;      /* changed to block */ 
    ... 
} 

如果你也希望他們爲中心，設置​​的家長text-align: center（在這種情況下body）

body { 
    text-align: center;     /* added property */ 
} 

---

棧片斷

/*File download button*/ 
 

 
body { 
 
    text-align: center;     /* added property */ 
 
} 
 

 
.buttonFileDownload_wrapper {   /* added rule  */ 
 
    display: inline-block; 
 
} 
 

 
.buttonFileDownload_container { 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
} 
 

 
.buttonFileDownload { 
 
    display: block;      /* changed to block */ 
 
    position: relative; 
 
    padding: 10px 60px; 
 
    background-color: transparent; 
 
    border: 3px solid black; 
 
    color: black; 
 
    text-decoration: none!important; 
 
    font-size: 1.5em; 
 
    line-height: 1.2; 
 
    text-align: center; 
 
    text-indent: 15px; 
 
} 
 

 
.buttonFileDownload:before, 
 
.buttonFileDownload:after { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 52%; 
 
} 
 

 

 
/* Download box shape */ 
 

 
.buttonFileDownload:before { 
 
    width: 20px; 
 
    height: 4px; 
 
    border-style: solid; 
 
    border-width: 0 4px 4px; 
 
} 
 

 

 
/* Download arrow shape */ 
 

 
.buttonFileDownload:after { 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 6px; 
 
    margin-top: -140px; 
 
    border-style: solid; 
 
    border-width: 8px 8px 0 8px; 
 
    border-color: transparent; 
 
    border-top-color: inherit; 
 
    animation: downloadArrow 2s linear infinite; 
 
    animation-play-state: paused; 
 
} 
 

 
.buttonFileDownload:hover:before { 
 
    border-color: black; 
 
} 
 

 
.buttonFileDownload:hover:after { 
 
    border-top-color: black; 
 
    animation-play-state: running; 
 
} 
 

 

 
/* keyframes for the download icon anim */ 
 

 
@keyframes downloadArrow { 
 
    /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */ 
 
    0% { 
 
    margin-top: -14px; 
 
    opacity: 1; 
 
    } 
 
    0.001% { 
 
    margin-top: -30px; 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    margin-top: 0; 
 
    opacity: 0; 
 
    } 
 
}

<div class="buttonFileDownload_wrapper"> 
 
    <div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Numbers</u><br/> 
 
     Numbers description</a> 
 
    </div> 
 
    <div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Colours</u><br/> 
 
     Colours description</a> 
 
    </div> 
 
    <div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/> 
 
     Onomatopoeia description</a> 
 
    </div> 
 
    <div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/> 
 
     Alphabet description</a> 
 
    </div> 
 
</div>

Answer 2

如果不設置元素的寬度，則「寬度」基於內容。因此，要麼使所有內容相同，要麼在元素上設置寬度。

Answer 3

您需要設置元素的寬度，否則根據它的內容長度。

例如：

/*File download button*/ 
 

 
.buttonFileDownload_container { 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
} 
 

 
.buttonFileDownload { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 10px 60px; 
 
    background-color: transparent; 
 
    border: 3px solid black; 
 
    color: black; 
 
    text-decoration: none!important; 
 
    font-size: 1.5em; 
 
    line-height: 1.2; 
 
    text-align: center; 
 
    text-indent: 15px; 
 
min-width:250px; 
 
} 
 

 
.buttonFileDownload:before, 
 
.buttonFileDownload:after { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 52%; 
 
} 
 

 

 
/* Download box shape */ 
 

 
.buttonFileDownload:before { 
 
    width: 20px; 
 
    height: 4px; 
 
    border-style: solid; 
 
    border-width: 0 4px 4px; 
 
} 
 

 

 
/* Download arrow shape */ 
 

 
.buttonFileDownload:after { 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 6px; 
 
    margin-top: -140px; 
 
    border-style: solid; 
 
    border-width: 8px 8px 0 8px; 
 
    border-color: transparent; 
 
    border-top-color: inherit; 
 
    animation: downloadArrow 2s linear infinite; 
 
    animation-play-state: paused; 
 
} 
 

 
.buttonFileDownload:hover:before { 
 
    border-color: black; 
 
} 
 

 
.buttonFileDownload:hover:after { 
 
    border-top-color: black; 
 
    animation-play-state: running; 
 
} 
 

 

 
/* keyframes for the download icon anim */ 
 

 
@keyframes downloadArrow { 
 
    /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */ 
 
    0% { 
 
    margin-top: -14px; 
 
    opacity: 1; 
 
    } 
 
    0.001% { 
 
    margin-top: -30px; 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    margin-top: 0; 
 
    opacity: 0; 
 
    } 
 
}

<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Numbers</u><br/> 
 
     Numbers description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Colours</u><br/> 
 
     Colours description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/> 
 
     Onomatopoeia description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/> 
 
     Alphabet description</a> 
 
</div>

Answer 4

你應該寬度添加到您的容器和寬度100％的按鈕：

/*File download button*/ 
 

 
.buttonFileDownload_container { 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
    width: 400px; 
 
} 
 

 
.buttonFileDownload { 
 
    width: 100%; 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 10px 60px; 
 
    background-color: transparent; 
 
    border: 3px solid black; 
 
    color: black; 
 
    text-decoration: none!important; 
 
    font-size: 1.5em; 
 
    line-height: 1.2; 
 
    text-align: center; 
 
    text-indent: 15px; 
 
} 
 

 
.buttonFileDownload:before, 
 
.buttonFileDownload:after { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 52%; 
 
} 
 

 

 
/* Download box shape */ 
 

 
.buttonFileDownload:before { 
 
    width: 20px; 
 
    height: 4px; 
 
    border-style: solid; 
 
    border-width: 0 4px 4px; 
 
} 
 

 

 
/* Download arrow shape */ 
 

 
.buttonFileDownload:after { 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 6px; 
 
    margin-top: -140px; 
 
    border-style: solid; 
 
    border-width: 8px 8px 0 8px; 
 
    border-color: transparent; 
 
    border-top-color: inherit; 
 
    animation: downloadArrow 2s linear infinite; 
 
    animation-play-state: paused; 
 
} 
 

 
.buttonFileDownload:hover:before { 
 
    border-color: black; 
 
} 
 

 
.buttonFileDownload:hover:after { 
 
    border-top-color: black; 
 
    animation-play-state: running; 
 
} 
 

 

 
/* keyframes for the download icon anim */ 
 

 
@keyframes downloadArrow { 
 
    /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */ 
 
    0% { 
 
    margin-top: -14px; 
 
    opacity: 1; 
 
    } 
 
    0.001% { 
 
    margin-top: -30px; 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    margin-top: 0; 
 
    opacity: 0; 
 
    } 
 
}

<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Numbers</u><br/> 
 
     Numbers description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Colours</u><br/> 
 
     Colours description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/> 
 
     Onomatopoeia description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/> 
 
     Alphabet description</a> 
 
</div>

Answer 5

爲什麼你不只是使用1個容器與特定的，可以說200px，並使按鈕寬度100％？

.buttonFileDownload_container { 
    width: 200px; 
    text-align: center; 
    margin-bottom: 20px; 
} 

.buttonFileDownload { 
    width: 100%; 
    display: inline-block; 
    position: relative; 
    padding: 10px 60px; 
    background-color: transparent; 
    border: 3px solid black; 
    color: black; 
    text-decoration: none!important; 
    font-size: 1.5em; 
    line-height: 1.2; 
    text-align: center; 
    text-indent: 15px; 
} 

    <div class="buttonFileDownload_container"> 
     <a href="#" class="buttonFileDownload"><u>Numbers</u><br/> 
      Numbers description</a> 
     <a href="#" class="buttonFileDownload"><u>Colours</u><br/> 
      Colours description</a> 
     <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/> 
      Onomatopoeia description</a> 
     <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/> 
      Alphabet description</a> 
    </div> 

Answer 6

/*File download button*/ 
 

 
.buttonFileDownload_container { 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
} 
 

 
.buttonFileDownload { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 10px 60px; 
 
    background-color: transparent; 
 
    border: 3px solid black; 
 
    color: black; 
 
    text-decoration: none!important; 
 
    font-size: 1.5em; 
 
    line-height: 1.2; 
 
    text-align: center; 
 
    text-indent: 15px; 
 
    width:260px; 
 
} 
 

 
.buttonFileDownload:before, 
 
.buttonFileDownload:after { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 52%; 
 
} 
 

 

 
/* Download box shape */ 
 

 
.buttonFileDownload:before { 
 
    width: 20px; 
 
    height: 4px; 
 
    border-style: solid; 
 
    border-width: 0 4px 4px; 
 
} 
 

 

 
/* Download arrow shape */ 
 

 
.buttonFileDownload:after { 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 6px; 
 
    margin-top: -140px; 
 
    border-style: solid; 
 
    border-width: 8px 8px 0 8px; 
 
    border-color: transparent; 
 
    border-top-color: inherit; 
 
    animation: downloadArrow 2s linear infinite; 
 
    animation-play-state: paused; 
 
} 
 

 
.buttonFileDownload:hover:before { 
 
    border-color: black; 
 
} 
 

 
.buttonFileDownload:hover:after { 
 
    border-top-color: black; 
 
    animation-play-state: running; 
 
} 
 

 

 
/* keyframes for the download icon anim */ 
 

 
@keyframes downloadArrow { 
 
    /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */ 
 
    0% { 
 
    margin-top: -14px; 
 
    opacity: 1; 
 
    } 
 
    0.001% { 
 
    margin-top: -30px; 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    margin-top: 0; 
 
    opacity: 0; 
 
    } 
 
}

<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Numbers</u><br/> 
 
     Numbers description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Colours</u><br/> 
 
     Colours description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/> 
 
     Onomatopoeia description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/> 
 
     Alphabet description</a> 
 
</div>

Answer 7

製作的容器。將其寬度設置爲每個按鈕所需的寬度。讓它裏面的所有的div的寬度該div內的所有標籤的100％
製作寬度爲100％
簡單

/*File download button*/ 
 
#container { 
 
    width: 200px; 
 
} 
 
#container > div { 
 
    width:100%; 
 
} 
 
#container > div > a { 
 
    width:100%; 
 
} 
 
.buttonFileDownload_container { 
 
    text-align: center; 
 
    margin-bottom: 20px; 
 
} 
 

 
.buttonFileDownload { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 10px 60px; 
 
    background-color: transparent; 
 
    border: 3px solid black; 
 
    color: black; 
 
    text-decoration: none!important; 
 
    font-size: 1.5em; 
 
    line-height: 1.2; 
 
    text-align: center; 
 
    text-indent: 15px; 
 
} 
 

 
.buttonFileDownload:before, 
 
.buttonFileDownload:after { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 52%; 
 
} 
 

 

 
/* Download box shape */ 
 

 
.buttonFileDownload:before { 
 
    width: 20px; 
 
    height: 4px; 
 
    border-style: solid; 
 
    border-width: 0 4px 4px; 
 
} 
 

 

 
/* Download arrow shape */ 
 

 
.buttonFileDownload:after { 
 
    width: 0; 
 
    height: 0; 
 
    margin-left: 6px; 
 
    margin-top: -140px; 
 
    border-style: solid; 
 
    border-width: 8px 8px 0 8px; 
 
    border-color: transparent; 
 
    border-top-color: inherit; 
 
    animation: downloadArrow 2s linear infinite; 
 
    animation-play-state: paused; 
 
} 
 

 
.buttonFileDownload:hover:before { 
 
    border-color: black; 
 
} 
 

 
.buttonFileDownload:hover:after { 
 
    border-top-color: black; 
 
    animation-play-state: running; 
 
} 
 

 

 
/* keyframes for the download icon anim */ 
 

 
@keyframes downloadArrow { 
 
    /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */ 
 
    0% { 
 
    margin-top: -14px; 
 
    opacity: 1; 
 
    } 
 
    0.001% { 
 
    margin-top: -30px; 
 
    opacity: 0; 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    margin-top: 0; 
 
    opacity: 0; 
 
    } 
 
}

<div id="container"> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Numbers</u><br/> 
 
     Numbers description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Colours</u><br/> 
 
     Colours description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Onomatopoeia</u><br/> 
 
     Onomatopoeia description</a> 
 
</div> 
 
<div class="buttonFileDownload_container"> 
 
    <a href="#" class="buttonFileDownload"><u>Alphabet</u><br/> 
 
     Alphabet description</a> 
 
</div> 
 
<div>