个人中心
gpt4 book ai didi

html - CSS Logo 、链接、配置文件对齐问题

转载 作者：行者123 更新时间：2023-11-28 01:02:38 25 4
gpt4 key购买 nike

我正在尝试编写一个基本的 HTML 导航标题来获得乐趣并自学一些 CSS/HTML，但我无法按照我预期的方式安排事情。

我想在最左边有一个标志，中间有一些页面链接，右边有一个用户图标，这是一个 moc 想法: idea这是一起屠宰代码的结果:( result

我认为要让我的想法奏效，我需要在一个整体容器内创建 3 个元素位置。像这样，但我似乎无法找到一种有效的方法: container

这是我当前的 CSS 代码:

html {
height:100%;
background-color: #f8f8ff;
min-width: 800px;
max-width: 1000px;
margin: auto;
}

body {
background-color: #FFF;
}

.topnav-logo{
float:left;
background-color: #f8f8ff;
margin: 0;
padding: 0;
}

.topnav-profile{
float:right;
background-color: #f8f8ff;
}

.topnav{
background-color: #f8f8ff;
margin: 0;
padding: 0;
width: auto;
}

ul.topnav {
list-style-type: none;
overflow: hidden;
}

/* Float the list items side by side */
ul.topnav li {
float: left;
line-height: 110px;
}

/* Style the links inside the list items */
ul.topnav li a {
display: inline-block;
color: RGB(120,200,250);
padding: 0px 10px;
text-decoration: none;
transition: 0.3s;
font-size: 30px;
}

目前与之配套的 HMTL 如下所示:

<html>
<head>
    <link rel="stylesheet" href="stylesheet.css" type="text/css"/>
    <title> </title>
</head>
<body>
<a class="topnav-logo" href="index.html"><img src="images/logo.jpg" alt="site-logo"></a>
<ul class="topnav" id="Topnav">
    <li><a href="">Link</a></li>
    <li><a href="">Link</a></li>
    <a class="topnav-profile" href="index.html"><img src="images/profile.png" alt="user profile"></a>
</ul>
body content
</body>

感谢您的阅读，感谢您的帮助:)

编辑:这么多很棒的回复，谢谢大家!很抱歉迟到的反馈，新年打扰了:(

澄清一下，我不想在 Logo 、链接和简介之间放置可见的物理线。我只是使用这些图像来演示我想要每个元素容器的位置。我希望按如下方式对齐链接文本和个人资料图片:

链接:垂直居中，水平居中

Profile img:垂直中间，水平右边。

最佳答案

既然你是为了好玩，我认为这是最简单的:)
我没有为完美的布局做所有的调整，但这是我认为你想要的。
简单地制作 3 个内联 block 给它们 text-align:left, center and right 和 width 33% approx (including Borders and stuffs) 所以他们每个区 block 净取 33%。

UPDATE 垂直对齐。

		div{
			display: inline-block;
			width:32%;
			height: 50px;
            line-height:50px;

			background-color: pink;
		}

		.left{
			text-align: left;
		}

		.middle{
			text-align: center;
		}
		.right{
			text-align: right;
		}
<div class="left">
	<span>Logo here on far left</span>
</div>
<div class="middle">
	<span>link1</span>
	<span>link2</span>
	<span>link3</span>
</div>
<div class="right">
	<span>User Icon on far right</span>
</div>

关于html - CSS Logo 、链接、配置文件对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41406037/

25 4 0
文章推荐： php - 从我的网站接收来自申请表的邮件时遇到问题
文章推荐： javascript - 无法找出一段代码中的多个 onmousedown/up 和 click 事件
文章推荐： c++ - 使用转换构造函数隐式需要复制构造函数
文章推荐： c++ - libpcap 中数据包的 vector
行者123
个人简介

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

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