Question

我有一个网页，其中有五个宽度为50的按钮彼此相邻排列，在每个按钮上方，我希望有一个文本项目。但是，将每一个放在<span>或<div style="display:inline">中都不能正确填充“width =”50“”或将“width：50px”添加到样式中;它们只是彼此相邻。 “明显”的答案是将每个项目放入表格单元格中，但W3C现在说这是一件坏事。

我也尝试使用readonly set的输入标签;这些空间正确，但文本显示在输入框中而不是“在页面背景上。”

有没有办法在不使用表格的情况下在水平方向上均匀间隔标签元素（可在脚本中更改）？

Answer 1

有一些可能的解决方案。您可以使用完全符合W3C建议的display: table-cell，也可以使用灵活的盒子，这是一个更好的解决方案。然而，弹性框仍然很新，您可能希望支持较旧的浏览器，因此display: table-cell方法可能至少可以作为后备工作。

请参阅working fiddle。

<强> HTML

<div class="container">
    <div class="row">
        <span>Text 1</span>
        <span>Text 2</span>
        <span>Text 3</span>
        <span>Text 4</span>
    </div>
</div>

<强> CSS

.container {
  display: table;
  width: 100%;
}

.row {
  display: table-row
}

span {
  display: table-cell;
  text-align: center;
}

Answer 2

display: inline的元素不带width属性，其大小由其内容决定;允许元素与其兄弟和串联显示，以接受宽度切换display属性为inline-block的属性。

Answer 3

内联元素不能具有固定的宽度或高度。尝试添加display: inline-block;。

Answer 4

这是因为内联元素没有固定宽度。它们会自动设置为适合空间。您需要设置display: inline-block以设置内联元素的宽度。

Answer 5

试试这个：

<style>
.btnbtnSpace{
 width:50px; 
 display: inline-block;
 }    
</style>


<div class="btnbtnSpace">Text<br /><button > 1</button></div>
<div class="btnbtnSpace">Text<br /><button > 2</button></div>
<div class="btnbtnSpace">Text<br /><button > 2</button></div>
<div class="btnbtnSpace">Text<br /><button > 4</button></div>
<div class="btnbtnSpace">Text<br /><button > 5</button></div>

Answer 6

＆＃34; display：inline-block＆＃34;工作。起初我没有注意到它，因为＆＃34; CSS显示器上的选项＆＃34; W3Schools的页面没有包含它;由于某种原因，内联块获得了自己的页面。

在HTML中制作文本元素会占用固定数量的空间而不使用表格？

6 个答案: