我想从a
标记中删除默认样式。
我想要实现的目的是将a
标记和其他内容放在一行中。但是,默认的a
标签样式不允许我。
以下是代码:
<table style="background: #DEE3E0" class="table table-responsive table-condensed">
<thead>
<tr style="padding: 0">
<th class="text-center" style="font-size: 12px; padding: 0">Name & Qty</th>
<th class="text-center" style="font-size: 12px; width: 50px;padding: 0">Rate</th>
<th class="text-center" style="font-size: 12px; width: 50px;padding: 0">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px">
<img src="//placehold.it/45" alt="Product Image" />
1x <a href="" style="margin: 0; padding: 0">
Product Name
</a>
<a href="javascript:void(0)" title="Remove">
<span class="pull-right text-danger">
<i class="fa fa-trash fa-lg"></i>
</span>
</a>
</td>
<td class="text-right" style="padding-top: 7.5px; font-size: 12px">150.00</td>
<td class="text-right" style="padding-top: 7.5px; font-size: 12px">150.00</td>
</tr>
<!-- and other rows... -->
</tbody>
<tfoot>
<tr>
<td colspan="2" style="font-size: 12px; font-weight: bold" class="text-right">Sub Total</td>
<td class="text-right" style="font-size: 12px; font-weight: bold">425.00</td>
</tr>
<tr>
<td colspan="2" style="font-size: 12px" class="text-right">Taxes</td>
<td style="font-size: 12px" class="text-right">50.00</td>
</tr>
<tr>
<td style="font-size: 12px" colspan="2" class="text-right">Shipping</td>
<td style="font-size: 12px" class="text-right">100.00</td>
</tr>
<tr>
<td style="font-size: 12px; font-weight: bold" colspan="2" class="text-right">Grand Total</td>
<td style="font-size: 12px; font-weight: bold" class="text-right">575.00</td>
</tr>
<tr>
<td colspan="3"> <a href="javascript:void(0)" style="font-weight: bold; color: #65C400; margin-top: -10px">View Cart</a>
<a href="javascript:void(0)" style="font-weight: bold; color: #65C400;" class="pull-right">Checkout</a>
</td>
</tr>
</tfoot>
</table>
以下是完整的小提琴:http://jsfiddle.net/j4o8tff5/
1x
是数量。我希望Product Name
应该放在数量本身旁边。因此我试图删除默认样式。
我搜索了很多,但找不到解决方案。
请帮助我。感谢。
答案 0 :(得分:1)
将您的数量文字换成span标记Demo
<span>1x</span>
答案 1 :(得分:0)
不是试图找出默认样式,而是使用一些样式来实现目标。只需使用 -
a {position:relative;上:-12px; }
这将解决您的问题。