Question

我不完全确定我是如何设法搞砸的。

如果您看一下左侧项目和右侧项目的位置，正确的项目无论出于何种原因都会突出，所以我认为我做错了。或者也许我的编码/ css被搞砸了，我还不完全确定编码，我只知道它“有效”。见下文。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"><br />
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<title>Pretty Senshi - Sailor Moon  </title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" 
href="http://pretty-senshi.com/log/wp-content/themes/BLANK-Theme/style.css"      
type="text/css" />
<link rel="pingback" href="http://pretty-senshi.com/log/xmlrpc.php" />

</head>

<body class="home blog logged-in admin-bar">
<body>

<div id="container">

<div id="rightHalf"></div>
<div style="text-align: center;"><caption>
<img src="http://pretty-senshi.com/images/design.png"  alt="text" id="picture">
</caption></div>

<div id="wrapper"><div id="leftcolumn">
<div class="headernav">Navigation</div>
<a href="about.php">About Us<br></a>
<a href="gallery.php">Gallery<br></a>
<a href="links.php">Links In/Out</a><br>
</div>

<div id="content">
<div class="post-1 post type-post status-publish 
format-standard hentry category-uncategorized" id="post-1"></div>
<div class="header">Welcome</div>
<div class="entry">
<p>The site isn&#8217;t ready yet. This site is not ONLY dedicated to 
Sailor Moon but to all anime.</p>

<div id="commentbar">
<div class="left">left stuff</div> 
<div class="right">right stuff</div></div>

</div>

<div id="footer"></div>

</body>

</html>

以下是它的CSS：

/*   
Theme Name: Pretty Senshi
Theme URI: http://pretty-senshi.com
Description: 
Author: Megan Riffey
Author URI: http://hateyourway.org
Version: 1
*/

body {background: url(http://pretty-senshi.com/images/sideone.png);
   background-repeat:repeat-x;background-color: #fcefd8;
   margin-top:0px;line-height: 20px;font-size: 10.5pt; 
   font-family: Tahoma;color:#998574;}

div#container {
    width:100%;z-index: -1;}

   .header {font-weight: bold;
    font-size: 14px;
    color: #D4556A;
    FONT-FAMILY: verdana;
    text-align: justify;
    letter-spacing: 0px;
    line-height: 25px;
    background:  url(http://pretty-senshi.com/images/header.png) left no-repeat;
    padding-right:3px;
    padding-left: 10px;
    padding-bottom: 3px;
    padding-top: 3px;
    text-align:center;}

.headernav {font-weight: bold;
    font-size: 13px;
    color: #D4556A;
    FONT-FAMILY: verdana;
    text-align: justify;
    letter-spacing: 0px;
    line-height: 25px;
    background:  url(http://pretty-senshi.com/images/header.png) left no-repeat;
    padding-right:20px;
    padding-left: 3px;
    padding-bottom: 3px;
    padding-top: 3px;
    text-align:right;}

.header:first-letter {color:#b970be;}

.headernav:first-letter {color:#b970be;}

div#picture {z-index: -1;width:780px;margin: 0 auto;text-align:center;}

#rightHalf {
   background: url(http://pretty-senshi.com/images/sidetwo.png);
   background-repeat:repeat-x;
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
   z-index: -1;}

p {padding: 10px;z-index: 1;}

#wrapper {position:relative;
    margin:0 auto;
    width: 650px;
    height:100%;}

#content {
    float: right;
    text-align:justify;margin-top:-80px;
    width: 440px;z-index: 999;height:100%;}

#leftcolumn {position:absolute;
    text-align:justify;
    width: 200px;margin-top:-80px;
    float: left;z-index: 999;height:100%;}

#commentbar {width:100%;padding:10px;}

.left {float:left; width:50%;} 

.right {float:right; width:50%;text-align:right;}

A:link, A:visited, A:active {
    color:#175f8b;
    text-decoration:none;
    text-transform:uppercase;
    font-size: 9pt;
    font-weight:bold;}

A:hover{
    color:#d76b92;
    text-decoration:none; 
    text-transform:uppercase;
    cursor:default; 
    border-bottom: 1px solid #7d8f9a;
    font-weight:bold;}

#date
    {font:10pt "Century Gothic", sans-serif;
    border-top:2px solid #d4aabc;
    margin-top:10px;
    color:#7ea558;
    text-align:right;
    font-weight:bold;
    text-transform:uppercase;}


div.comment a {
    width:100px
    float:left;
    height:22px;
    background-color:#72a2c6;
    text-align:center;
    display:block;
    letter-spacing:0px;
    text-shadow:none;
    text-transform:uppercase;
    margin-top:-16px;
    padding:3px;
    opacity:.8;
    filter:alpha(opacity=80);
    filter:"alpha(opacity=80)";}

我可以添加或更改哪些内容以使其与正文相对应？

Answer 1

这是因为您在padding: 10px;中使用#commentbar，只需删除它就可以了。其次，只是看到这一点，您还在使用padding: 10px; p 1}}在你的CSS中，所以如果你删除它，两个东西将完全一致

Answer 2

填充导致你的错误对齐...删除此CSS声明中的填充并且它将排成一行

#commentbar {
  width: 100%;
  /*padding: 10px;*/
}

CSS / DIV相同行上的文本对齐

2 个答案: