1. 首页
  2. 问答
  3. HTML5 - 按钮宽度不一样

HTML5 - 按钮宽度不一样

2017-04-25 54 views
-1

我试图让我的按钮具有相同的宽度，但由于某种原因，它不工作。需要为了做什么，以确保所有按钮符合这些期望的结果？：HTML5 - 按钮宽度不一样

  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>

来源

2017-04-25 MacaronLover

回答

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>

来源

2017-04-25 14:22:23 LGSon

0

如果不设置元素的宽度，则“宽度”基于内容。因此，要么使所有内容相同，要么在元素上设置宽度。

来源

2017-04-25 13:20:24 Rob

+0

@MacaronLover您可以使用百分比或宽度宽度 – Rob

0

您需要设置元素的宽度，否则根据它的内容长度。

例如：

/*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>

来源

2017-04-25 13:22:25 manelgarcia

0

你应该宽度添加到您的容器和宽度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>

来源

2017-04-25 13:22:31 JC97

0

为什么你不只是使用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>

来源

2017-04-25 13:24:56 Myron

0 

/*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>

来源

2017-04-25 13:25:46

0

制作的容器。将其宽度设置为每个按钮所需的宽度。让它里面的所有的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>

来源

2017-04-25 14:18:28

相关问题

 相关问题