[英]How to get width and height of text not the span with display table-cell
[英]How to format buttons text with table-cell display inside li?
我有具有表格单元格显示属性的按钮动态列表(连续 5 个)。我希望按钮文本位于表格单元格的中心,如图所示,并且在查看页面时不会 go 到下一行iPhone 屏幕。你们能告诉我应该对 css 进行哪些更改才能实现它吗?提前谢谢。
JavaScript 部分:
<script>
$(document).ready(function () {
$(".myModal").on("click", "li", function(){
$("li.menu__item").removeClass("menu__item--active");
$(this).addClass("menu__item--active");
var outlineButtonclass=this.className;
var title = $(this).attr('title');
alert("selected size:"+title);
});
});
</script>
款式部分:
<style>
.menu__element {
border: 1px ;
font-size: 14px;
}
li {
/* adds table cell around each li */
display:table-cell;
width: auto;
padding: 20px 20px 40px 20px;
position: relative;
border: 1px solid #000;
padding: 5px 10px;
}
ul{
border-spacing: 17px;
border-collapse: separate;
margin: 0; padding: 0;
}
.menu__item--active {
background: red;
}
</style>
UL部分:
<!-- Modal content -->
<div class="modal-content" style="max-height:calc(100vh - 110px);overflow-y: auto;">
<span class="close">×</span>
<br>
<div class="sizeLabell">Size<span class="form-asterisk"></span></div>
<ul class="square-list" id="square-list">
<li class="menu__item" title="36"><button name="size" type="button" class="menu__element" value="0" title="36">36</button></li>
<li class="menu__item" title="37 1/3"><button name="size" type="button" class="menu__element" value="1" title="37 1/3">37 1/3</button></li>
<li class="menu__item" title="38 2/3"><button name="size" type="button" class="menu__element" value="2" title="38 2/3">38 2/3</button></li>
<li class="menu__item" title="48"><button name="size" type="button" class="menu__element" value="3" title="48">48</button></li>
<li class="menu__item" title="48 2/3"><button name="size" type="button" class="menu__element" value="4" title="48 2/3">48 2/3</button></li><br>
<li class="menu__item" title="49 1/3"><button name="size" type="button" class="menu__element" value="5" title="49 1/3">49 1/3</button></li>
</ul>
</div>
</div>
尝试添加white-space: nowrap;
到您的 LI 元素的 CSS。
li {
display: table-cell;
width: auto;
padding: 20px 20px 40px 20px;
position: relative;
border: 1px solid #000;
padding: 5px 10px;
white-space: nowrap;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.