如何在没有间隔的表中显示动态内容？
我有一些从MySQL数据库中提取的名称，我想在html页面上显示这些名称。名称的数目和名称的长度各不相同，但它们都必须符合页面上固定的宽度。
到目前为止，我已经将它们全部显示在一个表中，并且每当显示5个名称时，我都会创建一个新的行(请参阅附件中显示虚拟名称的图像)。这还不算太糟，但让我感到困扰的是，每个表列的左边都是名称对齐。如何在没有固定间距的情况下将名称显示在一起，并在每次显示5个甚至6个名称时创建一个新行。
下面是我的一段代码，它展示了我是如何创建这个的。
$t=0;
echo "<td><span class=\"label label-default\" id=\"tag\">$uname</span> </td>";
//Control width of table
$t++;
if ($t=='5'){
echo '</tr><tr>';
$t=0;
}
}//End foreach loop
echo '</tr></tbody></table>回答 2
Stack Overflow用户
发布于 2017-02-10 23:34:06
选项1 -父级：text-align:center;子级：display: inline-block;
.some-container {
text-align: center;
}
.some-container span {
display: inline-block;
}
/* below is just to style it up, so it looks closer to your picture */
.some-container {
width: 70%;
margin: 50px auto;
}
.some-container span {
background-color: #aaa;
color: white;
padding: .5rem 1rem;
margin: 2px;
border-radius: 3px;
}<div class="some-container"><!--
--><span>Lorem</span><!--
--><span>ipsum</span><!--
--><span>dolor</span><!--
--><span>sit</span><!--
--><span>amet</span><!--
--><span>Lorem</span><!--
--><span>ipsum</span><!--
--><span>dolor</span><!--
--><span>sit</span><!--
--><span>sit</span><!--
--><span>amet</span><!--
--><span>Lorem</span><!--
--><span>ipsum</span><!--
--><span>dolor</span><!--
--><span>sit</span><!--
--><span>sit</span><!--
--><span>amet</span><!--
--><span>Lorem</span><!--
--><span>ipsum</span><!--
--><span>dolor</span><!--
--><span>sit</span><!--
--><span>sit</span><!--
--><span>amet</span><!--
--><span>Lorem</span><!--
--><span>ipsum</span><!--
--><span>dolor</span><!--
--><span>sit</span><!--
--><span>sit</span><!--
--><span>amet</span><!--
--><span>Lorem</span><!--
--><span>ipsum</span><!--
--><span>dolor</span><!--
--><span>sit</span><!--
--></div>
选项2 - flexbox (首选)
.some-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/* below is just to style it up, so it looks closer to your picture */
.some-container {
width: 70%;
margin: 50px auto;
}
.some-container span {
background-color: #aaa;
color: white;
padding: .5rem 1rem;
margin: 2px;
border-radius: 3px;
}<div class="some-container">
<span>Lorem</span>
<span>ipsum</span>
<span>dolor</span>
<span>sit</span>
<span>amet</span>
<span>Lorem</span>
<span>ipsum</span>
<span>dolor</span>
<span>sit</span>
<span>amet</span>
<span>Lorem</span>
<span>ipsum</span>
<span>dolor</span>
<span>sit</span>
<span>amet</span>
<span>Lorem</span>
<span>ipsum</span>
<span>dolor</span>
<span>sit</span>
<span>amet</span>
<span>Lorem</span>
<span>ipsum</span>
<span>dolor</span>
<span>sit</span>
<span>amet</span>
<span>Lorem</span>
<span>ipsum</span>
<span>dolor</span>
<span>sit</span>
<span>amet</span>
<span>Lorem</span>
<span>ipsum</span>
<span>dolor</span>
<span>sit</span>
<span>amet</span>
</div>
为什么2比1好:您会注意到，为了使第一个解决方案正确显示，我必须将所有空白(新行、制表符和缩进空间)包装在html注释中。这是因为浏览器认为inline-block的字母很大。它们将元素之间的所有空白缩小为一个单独的空格，该空格在您的框之间呈现(除非您没有像我这样注释它们)。解决方案2不需要这个。
此外，flexbox还具有更多的定位功能(例如，如果您为父行提供一个高度，即垂直对中；或者在每一行上平均分配空闲空间，就像一个合理的段落)。
我说过你绝对应该放弃<table>的想法吗？这仅适用于表格数据(例如排序、分页)。不要用它来布局。永远不会。
Stack Overflow用户
发布于 2017-02-11 01:18:01
如果必须在表中，只需使用以下CSS使所有span元素块元素：
td > span {
display: block;
} 这样，它们都会被拉伸到父元素(单元格)的宽度，没有留下任何空间(除了单元格边框)。
http://codepen.io/anon/pen/ZLmjvy
https://stackoverflow.com/questions/42169570
复制相似问题
腾讯云开发者
