gpt4 book ai didi

html - css中水平元素间距不均匀

转载 作者:行者123 更新时间:2023-11-28 01:55:54 30 4
gpt4 key购买 nike

我想了解我最初网站的 CSS 基础知识。我如何定位以下 div,以便拥有这种结构。Logo、Call 和 Message 只是文本(或图像)下面是导航栏(我猜是无序列表)

enter image description here

这是我的代码:

* {
margin: 0px;
padding: 0px;
}

body {
background-color: #a4afc1;
}

#container {
width: 1080px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
background-color: #EEE;
}
<div id="container">
<header>
<div id="branding">
<h3>logo</h3>
</div>

<div id="callme">
<h3>Call me</h3>
</div>

<div id="msgme">
<h3>Message me</h3>
</div>

</header>
</div>

最佳答案

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.left {
float:left;
}
.right {
float:right;
}
.clear {
clear:both;
}
ul {
margin:0;
padding:0;
}
li {
list-style-type:none;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Logo</div>
<div class="right">
<span>Call</span>
<span>Message</span>
</div>
<nav class="clear">
<ul>
<li class="left">
link A
</li>
<li class="left">
link B
</li>
<li class="left">
link C
</li>
</ul>
</nav>
</div>
</body>
</html>

关于html - css中水平元素间距不均匀,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49637471/

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