对齐中心弄乱定义列表答案

【问题标题】：Align center messing up definition list对齐中心弄乱定义列表
【发布时间】：2013-07-12 15:56:35
【问题描述】：

我想在我正在制作的网站上创建一个与我联系的部分，但问题是我的整个网站都有text-align:center，我正在使用联系信息的定义列表。有没有办法我仍然可以为我的页面使用包装器，但将文本向左对齐而不超出白色边框？

CSS：

@charset "utf-8";

html {
    text-align: center
}

#container {
    margin-left:auto;
    margin-right:auto;
    margin-top:50 auto;
    margin-bottom:50 auto;
    width:1000px;
    background-color:#666666;
}

#body1 {
    background-color:#666666;
    width:1000px;
    height:405px;;
    border:3px solid #FFFFFF;
    margin-top:50px auto;
}

#body2 {
    background-color:#666666;
    width:1000px;
    height:800px;;
    border:3px solid #FFFFFF;
    margin-top:50px auto;
}

#body3{
    background-color:#666666;
    width:1000px;
    height:500px;;
    border:3px solid #FFFFFF;
    margin-top:50px auto;
}

#body4{
    background-color:#666666;
    width:1000px;
    height:500px;;
    border:3px solid #FFFFFF;
    margin-top:50px auto;
}

#body5{
    background-color:#666666;
    width:1000px;
    height:500px;;
    border:3px solid #FFFFFF;
    margin-top:50px auto;
}

.navbar {
    margin:0px;
    background-color:#999;
    text-align:center;
    list-style:none;
    border-bottom:none;
    padding-left:0px;    
}


ul.navbar li {
    width:20%;
    display:inline-block;
}

ul.navbar a {
    color:white;
    font-size:20px;
    display:block;
    width:100%;
    margin:0px;
    padding:10px 0px;
    text-decoration:none;
}

ul.navbar a:hover {
    color:#000000;
    background-color:#CCC;
}

body {
    background-color:#333333;
}

#portrait {
    position:relative;
    top:20px;
    right:420px;


}

#headerhome {
    position:relative;
    bottom:130px;
    left:50px;
    font-size:30px;
    text-decoration:underline;
    font-family:arial;
    color:#CCCCCC
}

#goal {
    margin-left:40px;
    text-align:left;
    text-indent:40px;
    position:relative;
    bottom:110px
}

.tab {
    margin-left:40px;
}

#contact {
    position:relative;
    right:390px;
    text-align:left
}

HTML：

<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joe Scotto | Contact</title>
</head>

<body>
<div id="container">
<div id="body3">
<img src="banner.png" width="1000" height="100" />
<!--Navbar Start-->
<center>
    <ul class="navbar">
        <li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Services</a></li><li><a href="biography.html">Biography</a></li>
    </ul>
</center>
<!--Navbar End-->
<div id="contact">
<dl>
    <dt><h3>Phone Number</h3></dt>
        <dd>XXX-XXX-XXXX</dd>
    <dt><h3>Email Address</h3></dt>
        <dd>XXXXXX@gmail.com</dd>
</dl>
</div>
</div>    
</div>
</body>
</html>

【问题讨论】：

请你提供一个小提琴
#contact { position:relative; right:390px; text-align:left } 你写的很完美。。因为CSS从上到下，用新值覆盖属性。

标签： css html xhtml xhtml-transitional

【解决方案1】：

如果我对您的理解正确，那么您的问题可以通过两件事来解决：

在#contact css 中，在“text-align:left;”之后添加“!important”在同一行
如果重叠，添加边距。

如果这不能回答您的问题，请给我一个链接，以便我查看发生了什么。

希望我能帮上忙。

【讨论】：

【解决方案2】：

#contact { text-align:left; } 可能有用。 position:relative; 尝试删除。因为 CSS 从上到下并用新值覆盖属性.. Check this

【讨论】：

【解决方案3】：

如果您想在body3中保留“接触块”（居中），为什么要添加代码-“右：390px；”到#contact，我看不出原因。因此，如果您删除它，一切都会好起来的。

【讨论】：

【解决方案4】：

你试过了吗？

dl {
    text-align: left;
}

编辑：我将以上内容添加到您的 css 中，并且列表向左对齐。

【讨论】：

Lars，这是评论还是答案？如果有答案，请解释为什么这应该有效。谢谢！

【解决方案5】：

从 html 标签中的 css 中删除 text-align:center 并在每个 div 标签中添加 text-align 属性，以便您可以根据需要进行对齐

【讨论】：