使用span创建表
我正在尝试使用 和
但桌子没有正确组合在一起。我找不到问题出在哪里。请告诉我问题是什么。我必须在同一行中生成 4 到 5 行。
示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.line1
{
background-color:#AAAAAA;
height: 150px;
width: 1px;
display: block;
}
.line2
{
background-color:#CE5611;
height: 150px;
width: 1px;
display: block;
margin-left: 121px;
}
</style>
</HEAD>
<body>
<div id="a1" style='padding-left: 14px;width: 100px;'>
<span>h1</span>
<span class="line1"></span>
<span>h2</span>
<span class="line2"></span>
<span>h3</span>
<span class="line1"></span>
</div>
</body>
</html>
I am trying to create one table using the <span> and <div> concept.
But the table is not coming together properly. I couldn't find where the issue is. Please tell me what the problem is. I have to produce 4 to 5 lines in a same row.
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.line1
{
background-color:#AAAAAA;
height: 150px;
width: 1px;
display: block;
}
.line2
{
background-color:#CE5611;
height: 150px;
width: 1px;
display: block;
margin-left: 121px;
}
</style>
</HEAD>
<body>
<div id="a1" style='padding-left: 14px;width: 100px;'>
<span>h1</span>
<span class="line1"></span>
<span>h2</span>
<span class="line2"></span>
<span>h3</span>
<span class="line1"></span>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
相反，这样的方式：
吗..
你知道
Instead this way of going :
do
you got the idea ..
您真的希望分类跨度具有
display: block吗？这迫使每个人都走上一条单独的线。从功能上讲，与有点相同（和与有点相同）。您可能正在寻找
display: inline-block。这使您能够像您一样阻止属性（高度、宽度），但仍使其在周围内容中移动。另一种选择是使用display: table-cell。 此处有一个显示支持图表。Do you really want the classed spans to have
display: block? That forces each one onto a seperate line. Functionally,<span style="display: block">is kinda the same thing as<div>(and<div style="display: inline">is kinda the same thing as<span>).You're probably looking for
display: inline-block. That gives you the ability to block attributes (height, width) like you are, but still leave it moving around within the surrounding contents. Another alternative is to usedisplay: table-cell. There's a chart ofdisplaysupport here.您应该使用
。You should use a
<table>.我更喜欢使用
li和span标签，而不是div和span。它使操作变得更加容易。使用 li 作为block和 spaninline-block。I prefer using
liandspantags instead ofdivandspan. It makes manipulation much easier. With li asblockand spaninline-block.