0

そのため、DreamweaverでWebサイトを作成しています（クラスはすべて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

text-alignの代わりにfloatを使用してみてください。

#bodyformat #logincart {
    float: right;
}

詳細： http ：//www.w3schools.com/cssref/pr_class_float.asp

于 2013-03-25T01:44:36.833 に答える