Html 对齐导航菜单_Html_Css - Fatal编程技术网

Html 对齐导航菜单

html css

Html 对齐导航菜单,html,css,Html,Css,我正在尝试为正在使用的网站模板创建导航菜单。我想把品牌名称放在左边，把社交媒体字体的图标放在右边，但是我的品牌名称是缩进的，而右边的图标是它们应该在的地方。我怎样才能让他们平分 HTML 将li用于如下菜单项：首先，li元素应该包装链接要在左侧和右侧获得一个，您可以通过如下方式进行浮动： #主页#测试{ 填充顶部：15px；字体大小：30px；字体系列：“PT Sans”，无衬线；颜色：#545456；文字装饰：无； } #导航{ 列表样式：无；填充：0； } #李

我正在尝试为正在使用的网站模板创建导航菜单。我想把品牌名称放在左边，把社交媒体字体的图标放在右边，但是我的品牌名称是缩进的，而右边的图标是它们应该在的地方。我怎样才能让他们平分

HTML

将li用于如下菜单项：

首先，

li

元素应该包装链接

要在左侧和右侧获得一个，您可以通过如下方式进行浮动：

#主页#测试{
填充顶部：15px；
字体大小：30px；
字体系列：“PT Sans”，无衬线；
颜色：#545456；
文字装饰：无；
}
#导航{
列表样式：无；
填充：0；
}
#李海军{
显示：内联块；
填充物：5px；
}
#李海军：第一个孩子{
浮动：左；
}
#李导航：最后一个孩子{
浮动：对；
}

嗨，加布里埃尔，你给了我们解决问题所需的所有代码了吗？布局看起来不正确，比如“右边的图标应该在哪里”-什么图标？您的HTML也是无效的——<代码> A <代码>不能是<代码> UL>代码>的直接子孙>代码>“家庭”/CODE由于缺省CSS而被缩进，因为<代码> UL>代码>元素-您应该考虑使用浏览器开发工具检查您的页面，看看还有什么会影响您的布局。抱歉。它在我的屏幕上看起来完全不同。我应该包括所有脚本和链接吗？您应该遵循@MichaelCoker建议，只向我们提供在您的问题中重复问题所需的代码。@GabrielPozo不包括所有内容，只包括重现问题所需的最低限度。“寻求调试帮助的问题（“此代码为什么不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现该问题所需的最短代码。没有明确问题说明的问题对其他读者没有用。”请参阅：如何创建问题的一部分，OP正在使用

#home

元素查找对齐帮助。这就是我要查找的内容，但我如何将1个项目设置为向左和向右，而其他项目位于中间？

<!DOCTYPE html>
<html lang="en">
<head>

<title>Assignment</title>
<!--Bootstrap For Cleaner Viewability-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina|PT+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="minimal.css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
</head>

<body>

<div class="container">
<div align="center">

<ul id="nav">

<a href="#" id="home">MINIMAL</a> <!--This is the one-->

<a href="#"><li>Home</li></a>
<a href="#"><li>Shop</li></a>
<a href="#"><li>Contact</li></a>
<a href="#"><li>Shop Men</li></a>
<a href="#"><li>Shop Women</li></a>

<a href="#" id="test">MINIMAL</a>

</ul>
</div>
</div>

#home {
float: left;
padding-top: 15px;
font-size: 30px;
font-family: 'PT Sans', sans-serif;
color: #545456;
text-decoration: none;
}

#test  {
float: right;
padding-top: 15px;
font-size: 30px;`enter code here`
font-family: 'PT Sans', sans-serif;
color: #545456;
text-decoration: none;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>