CSS格式化模板以使布局正常工作

Question

大家好，我想知道我的网站是否可以得到一些帮助。这是一个关于电子商务的单位作业，我使用了一个模板。我已经得到了一个Javascript代码来跟踪篮子中的项目数量和成本，但我不能让它很好地显示。

它要么与"购物车"在同一行，要么如果我使用<br>，则远远低于标题菜单部分。

https://i.stack.imgur.com/yKMon.png让你明白我的意思

header.php代码

        <h1 id="logo"><a href="index.html">Pet Accessories</a></h1> 
    <!-- Cart -->
    <div id="cart">
        <a href="managecart.html" class="cart-link" >Your Shopping Cart</a>
        <br />
        <script language="javascript" >
            if ( Cart_is_empty()) {
                document.write('Your cart is empty.');
            } else {
                Print_total_products(true);
                document.write(', ');
                Print_total(true);
            }
        </script>
    </div>
    <!-- End Cart -->
    <!-- Navigation -->
    <div id="navigation">
        <ul>
            <li><a href="index.html" class="active">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <!-- End Navigation -->

相关style.css代码

    #header { height:64px; background:url(images/header.gif); position:relative;}
    #navigation { float:right; white-space:nowrap; }
    #navigation ul{ list-style-type: none; height:64px; font-weight: bold; float:left;}
    #navigation ul li{ float:left; display:inline; }
    #navigation ul li a{ float:left; height:64px; line-height:64px; text-decoration: none; color:#fff; padding:0 15px;}
    #navigation ul li a.active,
    #navigation ul li a:hover{ background:#fff; color:#8b0000; }
    #cart { float:right; width:160px; top:0; right:0; height:51px; background:#8b0000; color:#fff; padding:13px 10px 0 10px; white-space:nowrap; line-height:38px;}
    a.cart-link { color:#fff; background:url(images/cart-link.gif) no-repeat 0 0; padding:0 0 0 32px; text-decoration: none;}
    a.cart-link:hover { text-decoration: underline;}
    #sidebar { float:left; width:226px;}
    #content { float:right; width:724px;}
    #main { padding:10px 0 0 0; }

我已经尽力提供尽可能多的信息，任何帮助都将不胜感激。我不知道我是否需要修改。css文件或使用另一种类型的<br>来让我的文本显示在正确的位置。

感谢杰米

Answer 1

将#cart的高度更改为min-height(以及顶部部分的其余部分)或完全删除它。

如果你必须在这个固定的高度，改变#cart的line-height，使其足够小

Answer 2

#cart元素的行高为38px。删除。

您可能想要做的另一件事是删除<br />标记，让它们在同一行。

注意，160px的宽度是不够的。你应该把它调高(也改变所有其他元素的宽度)，或者去掉#cart元素中的white-space:nowrap;。