(正常)理解HTML和CSS时遇到了麻烦:
我有一张桌子:
<table style="height:200px;width:120px; border-style:solid;">
<tr>
<td><img src=IMAGELINK" style="height:120px;width:120px;"/></td>
</tr>
<tr>
<td><b> NAME </b> </td>
</tr>
<tr>
<td> <b> PRICE:- </b> </td>
</tr>
<tr>
<td>
<a style=
"
width:50%;
padding:1px;
border-style:solid;
border-width:1px;
border-color: #eee0000;
background-color:#eee000;
text-decoration:none;
color:black;"
href="LINK"> buy
</a>
<a style=
"
width:50%;
padding:1px;
border-style:solid;
border-width:1px;
border-color: #eee0000;
background-color:#eee000;
text-decoration:none;
color:black;"
href="LINK"> read
</a>
</td>
</tr>
</table>
以下是它的外观:
正如您所看到的,两个购买/阅读按钮非常小,出于某种原因,它们只占用了行的一半空间。我已经尝试了很多不同的东西来让两个按钮占据整排......
答案 0 :(得分:4)
也许您可以对表格单元格使用colspan
属性
http://jsfiddle.net/zKW3z/1/
答案 1 :(得分:1)
我个人认为将格式应用于<a href="">
代码不是一个好主意。
我调整了您的代码,以便按钮填充空间,方法是将它们放入<div>
并设置float:left
和float:right
。
也不要使用50%的宽度,因为有一些填充和边距处于活动状态。
<table style="height:200px;width:120px; border-style:solid;">
<tr>
<td><img src=IMAGELINK" style="height:120px;width:120px;"/></td>
</tr>
<tr>
<td><b> NAME </b> </td>
</tr>
<tr>
<td> <b> PRICE:- </b> </td>
</tr>
<tr>
<td>
<a href="LINK"><div style=
"
width:46%;
float:left;
padding:1px;
border-style:solid;
border-width:1px;
border-color: #eee0000;
background-color:#eee000;
text-decoration:none;
color:black;
"
> buy </div>
</a>
<a href="LINK"><div style=
"
width:46%;
float:right;
padding:1px;
border-style:solid;
border-width:1px;
border-color: #eee0000;
background-color:#eee000;
text-decoration:none;
color:black;
"
> read </div>
</a>
</td>
</tr>
</table>
答案 2 :(得分:1)
编写内联CSS从来都不是一个好主意。这被认为是不好的做法。了解html
仅用于表示信息。它应该看起来/出现的确切内容是由CSS处理的。由于它们执行不同的功能,因此必须保持独立。这被称为&#39;关注点分离&#39;。
因此我建议您编辑代码,以便将它们分开。
因此,您可以将HTML设为:
<table style="height:200px;width:120px; border-style:solid;">
<tr>
<td>
<img src="#/>
</td>
</tr>
<tr>
<td><span>NAME</span>
</td>
</tr>
<tr>
<td><span>PRICE:-</span>
</td>
</tr>
<tr>
<td> <div><a href="#"> Buy</a></div>
<div> <a href="#"> Read </a></div>
</td>
</tr>
</table>
你的CSS就是这样:
td > img {
height:120px;
width:120px;
}
td > span {
font-weight:bold;
}
td > div {
width: 48%;
display:inline-block;
}
div > a {
width:100%;
margin:0 1px;
border-style:solid;
border-width:1px;
border-color: #eee0000;
background-color:#eee000;
text-decoration:none;
color:black;
display:inline-block;
text-align:center;
}
这将为您提供所需的信息。
在此处查看:http://jsfiddle.net/9HxW5/
希望这有帮助!!!