个人中心
gpt4 book ai didi

php - 同一行上的 CSS/DIV 文本相反对齐

转载 作者：行者123 更新时间：2023-11-28 13:32:39 25 4
gpt4 key购买 nike

我不完全确定我是如何做到这一点的。

http://pretty-senshi.com

如果您看一下左侧元素和右侧元素所在的位置，无论出于何种原因，右侧元素都会伸出来，所以我认为我做错了什么。或者也许我的编码/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)";}

我可以添加或更改什么以使其与正文对齐？

最佳答案

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

关于php - 同一行上的 CSS/DIV 文本相反对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13374207/

25 4 0
文章推荐： PHP 正则表达式 : CSS Relative to Absolute
文章推荐： php - 根据用户名显示删除消息 URL
文章推荐： css - 旋转到横向或在较大的显示器上使用时保持站点宽度
文章推荐： html - 在 Django if/else 语句中用 CSS 替换图像
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com