所以，我在 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> † <a href="about_us.html">about us</a> † <a href="games.html">games</a> † <a href="contact_us.html">contact us</a> † <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© ez games 2013 ††† 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;
}
最佳答案
尝试使用 float 而不是文本对齐。
#bodyformat #logincart {
float: right;
}
关于HTML 关于换行符？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15606049/