多行文本的HTML + CSS自动换行和对齐按钮文本位置
多行文本的HTML + CSS自动换行和对齐按钮文本位置
提问于 2017-03-14 04:57:20
我正在制作一组在移动设备上使用的按钮，具有定义的最小宽度和最大宽度，以确保按钮的大小不会随着移动屏幕的大小而变得太宽。
按钮内的文本大小各不相同，为了适应较长的文本长度，我确保将它们白包装到下一行。然而，当我这样做时，按钮位置向下移动，而文本仍然对齐(参见图片:6岁以下的幼儿)。
如何确保所有按钮彼此对齐，同时确保文本在需要时换行？
谢谢!
#m-container {
max-wdith:375px;
width:375px;
overflow:auto;
height: 667px;
max-height: 667px;
border:1px solid black;
}
#m-search-ffv-carousel {
padding:10px;
overflow: auto;
white-space: nowrap;
float: left;
margin-bottom: 0.5rem;
}
button.filter {
background-color: #eee;
border: 1px solid #ccc;
color: #333;
white-space: normal;
cursor: pointer;
overflow: hidden;
text-align: center;
margin-right: 0.65rem;
min-width: 95px;
max-width: 120px;
min-height: 45px;
text-transform: none;
line-height: 16px;
font-weight: 200;
font-size: 0.775rem;
display: inline-block;
align-items: center;
justify-content: center;
top: 0px;<h2>Mocked Mobile size</h2>
<div id="m-container">
<div id="m-search-ffv-carousel">
<button class="filter" id="">Boys</button>
<button class="filter" id="">Baby Toddlers under 6</button>
<button class="filter" id="">Male</button>
<button class="filter" id="">Female</button>
<button class="filter" id="">Show more</button>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2017-03-14 05:09:55
只需将vertical-align:top添加到button.filter即可。
#m-container {
max-wdith:375px;
width:375px;
overflow:auto;
height: 667px;
max-height: 667px;
border:1px solid black;
}
#m-search-ffv-carousel {
padding:10px;
overflow: auto;
white-space: nowrap;
float: left;
margin-bottom: 0.5rem;
}
button.filter {
vertical-align:top;
background-color: #eee;
border: 1px solid #ccc;
color: #333;
white-space: normal;
cursor: pointer;
overflow: hidden;
text-align: center;
margin-right: 0.65rem;
min-width: 95px;
max-width: 120px;
min-height: 45px;
text-transform: none;
line-height: 16px;
font-weight: 200;
font-size: 0.775rem;
display: inline-block;
align-items: center;
justify-content: center;
top: 0px;<h2>Mocked Mobile size</h2>
<div id="m-container">
<div id="m-search-ffv-carousel">
<button class="filter" id="">Boys</button>
<button class="filter" id="">Baby Toddlers under 6</button>
<button class="filter" id="">Male</button>
<button class="filter" id="">Female</button>
<button class="filter" id="">Show more</button>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42773267
复制相关文章
相似问题
腾讯云开发者
