从boostrap锚链

时间:2015-04-29 10:55:57

标签: css html5 twitter-bootstrap-3

我想从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应该放在数量本身旁边。因此我试图删除默认样式。

我搜索了很多,但找不到解决方案。

请帮助我。感谢。

2 个答案:

答案 0 :(得分:1)

将您的数量文字换成span标记Demo

<span>1x</span>

答案 1 :(得分:0)

不是试图找出默认样式,而是使用一些样式来实现目标。只需使用 -

a {position:relative;上:-12px; }

这将解决您的问题。