0

所以，我在 Dreamweaver 中创建了一个网站（课程都是关于 Dreamweaver 的），我对页面布局的最后一部分感到困惑。

我目前在我的页面右上角有一个“查看购物车”按钮，左边全是空白，所以我决定在那里放一个 768x15 的广告。但是，如果我将广告与购物车放在同一个组中，它也会向右对齐，并且就在“查看购物车”的左侧。如果我将广告放在查看购物车上方，则会有一个换行，因此会留下更多空白空间，之后也是如此。

我的简单问题：有没有办法让广告和我的“查看购物车”按钮在同一行，而广告不与页面的右侧对齐？

<!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>
            <!--
                ez games
                author: kyle meek
                3/24/2013
            -->
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>ez games - home page</title>
        <link href="ez_styles.css" rel="stylesheet" type="text/css" />
        <link href="spryassets/sprymenubarhorizontal.css" rel="stylesheet" type="text/css" />
        <script src="spryassets/sprymenubar.js" type="text/javascript"></script>
    </head>

    <body id="bodyformat">
        <p id="logincart"><a href="viewcart.html">view cart</a></p>
        <script type="text/javascript">
            <!--
            google_ad_client = "ca-pub-0707070728226508";
            /* smalltop */
            google_ad_slot = "4701711529";
            google_ad_width = 728;
            google_ad_height = 15;
            //-->
        </script>
        <script type="text/javascript"
            src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script>
        <p id="logobanner"><img name="ez_logo" src="" width="280" height="150" alt="ez games logo" style="background-color: #ffda00" />
        <img src="" width="1000" height="150" alt="ez games banner" style="background-color: #4212af" /></p>
        <br />
        <h3 id="textalign"><a href="index.html">home</a> &dagger; <a href="about_us.html">about us</a> &dagger; <a href="games.html">games</a> &dagger; <a href="contact_us.html">contact us</a> &dagger; <a href="locate_us.html">locate us</a></h3>
        
        <div id="ad1" align="center">
            <script type="text/javascript"><!--
                google_ad_client = "ca-pub-0707070728226508";
                /* banner ad */
                google_ad_slot = "9705490722";
                google_ad_width = 468;
                google_ad_height = 60;
                //-->
            </script>
            <script type="text/javascript"
            src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
            </script>
        </div>
        <br />
        <hr />
        <span id="vertnav">
            <h2>systems</h2><hr />
            <ul>
                <li><a href="atari.html">atari</a></li>
                <li><a href="sega_genesis.html">sega genesis</a></li>
                <li><a href="ps1.html">playstation</a></li>
                <li><a href="ps2.html">playstation 2</a></li>
                <li><a href="ps3.html">playstation 3</a></li>
                <li><a href="xbox.html">x-box</a></li>
                <li><a href="xbox360.html">x-box 360</a></li>
                <li><a href="nes.html">nes</a></li>
                <li><a href="snes.html">super nes</a></li>
                <li><a href="nintendo64.html">nintendo 64</a></li>
                <li><a href="gamecube.html">gamecube</a></li>
                <li><a href="wii.html">nintendo wii</a></li>
                <li><a href="wiiu.html">nintendo wii-u</a></li>
            </ul>
        </span>
    
        <section id="sect1">
            <aside id="sides"><h1>like us on facebook!</h1><br />
                <p><iframe src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/ezgamesofficial"
                        scrolling="no" frameborder="0"
                        style="border:none; width:200px; height:80px"></iframe></p>
                <hr />
                <script type="text/javascript">
                    <!--
                    google_ad_client = "ca-pub-0707070728226508";
                    /* smallrect */
                    google_ad_slot = "5399715525";
                    google_ad_width = 180;
                    google_ad_height = 150;
                    //-->
                </script>
                <script type="text/javascript"
                    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
                </script>
            </aside>
            <article id="art1"><h1>home</h1>
                <p>greetings! content of article one goes here! paragraphs are here. greetings! content of article one goes here! paragraphs are here. greetings! content of article one goes here! paragraphs are here. greetings! content of article one goes here! paragraphs are here. greetings! content of article one goes here! paragraphs are here. greetings! content of article one goes here! paragraphs are here.</p>
            </article>
            <article id="art2"><h1>article numero dos</h1>
                <p>lorem ipsum article 2 blah blah info. lorem ipsum article 2 blah blah info. lorem ipsum article 2 blah blah info. lorem ipsum article 2 blah blah info. lorem ipsum article 2 blah blah info. lorem ipsum article 2 blah blah info. </p>
            </article>
        </section>
        <footer id="foot"><hr />copyright&copy; ez games 2013 &dagger;&dagger;&dagger; all rights reserved.</footer>
    </body>
</html>

和我的 CSS

#bodyformat #logincart {
    text-align: right;
}
#bodyformat #logincart a {
    color: #4212af;
    background-color: #ffda00;
    text-decoration: none;
    padding-left: 5px;
    padding-right: 5px;
}
4

1 回答 1

0

尝试使用浮点数而不是文本对齐。

#bodyformat #logincart {
    float: right;
}

更多信息： http ://www.w3schools.com/cssref/pr_class_float.asp

于 2013-03-25T01:44:36.833 回答