gpt4 book ai didi

html - 当我在标题中给出边界有问题时?

转载 作者:太空宇宙 更新时间:2023-11-04 07:49:21 25 4
gpt4 key购买 nike

当我在底部给出边框时,它会上升,而标题会下降,正如我们在代码中看到的粉红色线条边框上升时,我希望它位于全名下方

我正在使用这个网站的引用并自己制作https://codepen.io/techie4good/pen/RGNBPQ?q=resume&limit=techie4good

body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}

.main {
color: #4EC5C1;
}

#name {
float: left;
}

#contact {
float: right;
list-style-type: none;
}

#workExperiance {
float: left;
}

header {
border-bottom: solid 2px pink;
margin: 70px;
}
<html lang="en">

<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>

<body>
<header>
<section>
<h1 id="name"><span class="main">full </span> Name</h1>
</section>
<section>
<ul id="contact">
<li><span class="main">Cell:</span> +1-000000000</li>
<li><span class="main">Email: </span> aaaaaa@gmail.com</li>
<li><span class="main">Location:</span> NY,USA.</li>
</ul>
</section>
</header>
<section id="workExperiance">Work Experience</section>
</body>

</html>

最佳答案

添加 float: left;width: 100%;.header

body {
font-family: Arial, sans-serif;
font-size: 1.1em;
width: 75%;
margin: 0 auto;
}

.main {
color: #4EC5C1;
}

#name {
float: left;
}

#contact {
float: right;
list-style-type: none;
}

#workExperiance {
float: left;
}

header {
border-bottom: solid 2px pink;
margin: 70px;
float: left;
width: 100%;
}
<html lang="en">

<head>
<title>Full Name Resume</title>
<meta charset=utf-8>
</head>

<body>
<header>
<section>
<h1 id="name"><span class="main">full </span> Name</h1>
</section>
<section>
<ul id="contact">
<li><span class="main">Cell:</span> +1-000000000</li>
<li><span class="main">Email: </span> aaaaaa@gmail.com</li>
<li><span class="main">Location:</span> NY,USA.</li>
</ul>
</section>
</header>
<section id="workExperiance">Work Experience</section>
</body>

</html>

关于html - 当我在标题中给出边界有问题时?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47900785/

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