如何在 li 内使用表格单元格显示格式化按钮文本？

Question

I have dynamic list of buttons (5 in a row) with table-cell display property.I want buttons text to be in the center of table-cell as shown on the pic and doesn't go to next line when page is viewed on iPhone screen.Could you guys tell me what changes should I make to css to achive it?Thanks in advance.

JavaScript part:

<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 part:

<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 part:

<!-- 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>

Answer 1

Try adding white-space: nowrap; to your LI element's CSS.

li {
  display: table-cell;
  width: auto;
  padding: 20px 20px 40px 20px;
  position: relative;
  border: 1px solid #000;
  padding: 5px 10px;
  white-space: nowrap;
}