gpt4 book ai didi

css - 对齐中心搞乱定义列表

转载 作者:行者123 更新时间:2023-11-28 12:41:35 24 4
gpt4 key购买 nike

我想在我正在制作的网站上创建一个与我联系的部分,但问题是我的整个网站都有 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 css 中,在“text-align:left;”之后添加“!important”在同一条线上

  • 如果重叠则添加边距。

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

希望我有所帮助。

关于css - 对齐中心搞乱定义列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17643174/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com