将<按钮>的显示设置为表格单元格 [英] Setting a <button>'s display as table-cell
本文介绍了将<按钮>的显示设置为表格单元格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图设置按钮的
显示
属性为 table- cell
但它不像一个行为。
任何帮助将不胜感激。
I'm trying to set a button
's display
property as table-cell
but it doesn't behave like one.
Any help would be appreciated.
jsFiddle Demo (The demo contains a fixed container height, but I need it to work without it).
DOM:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<button class="item"></button>
</div>
CSS:
.container {
border: 5px solid blue;
display: table;
table-layout: fixed;
}
.item {
border: 3px solid red;
display: table-cell;
}
The result:
Edit: I need it to work entirely like a table cell, even without fixed sizes.
Note that some solutions seem to work fine on Chrome but don't work on FF.
解决方案
How about using a label
? That way you get the functionality of the button, but the visibility of the label. Tested in Firefox and Chrome. Updated example for form submission.
- No JavaScript is involved with the clickability of the cell region
- Works without a fixed height on the container
- Works when a different cell has a larger height than the one with the button
- Works with multiple button cells
HTML:
<form onsubmit="alert(); return false;">
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="container">
<div class="item">4</div>
<div class="item">5<br><br><br>Extended cell</div>
<label class="item">Button 1<button type="submit"></button></label>
<label class="item">Button 2<button type="submit"></button></label>
</div>
</form>
CSS:
.container {
margin: 10px;
border: 5px solid blue;
display: table;
table-layout: fixed;
width: 300px;
}
.item {
border: 3px solid red;
display: table-cell;
}
.item button {
background-color: transparent;
position: absolute;
left: -1000px;
height: 1px;
width: 1px;
overflow: hidden;
}
这篇关于将<按钮>的显示设置为表格单元格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文