在导航栏中添加和定位图像
在导航栏中添加和定位图像
提问于 2020-08-07 03:13:56
我必须将我的ESPN移动到导航栏的最左边，并且我需要在导航栏中添加一个扫描图标，如下图所示。我正在绘制相同的图片，但我将无法添加扫描图标和添加3条后的编程标签。我正在用HTML设计同样的图片，但我不能摆脱这2到3个东西。任何帮助都是非常感谢的。
这是我的代码：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/responsee.css">
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<link rel="stylesheet" href="css/template-style.css">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
</head>
<body class="size-1140">
<header role="banner" class="position-absolute">
<nav class="background-transparent background-transparent-hightlight full-width sticky">
<div class="s-20 l-2">
<a href="index.html" class="logo">
</a>
</div>
<div class="top-nav s-20 l-20">
<p class="nav-text"></p>
<ul class="right chevron">
<a style="text-align:right;">ESPN</a>
<li><a style="text-align:right;">HOME</a></li>
<li><a style="text-align:right;">SCHEDULE</a></li>
<li><a>PROGRAMMING</a>
<ul>
</ul>
</li>
<li><a >ABOUT</a></li>
<li><a >NEWS</a></li>
<li><a >CONTACT</a></li>
<li><a>SELECTLANGUAGE</a>
<ul>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN -->
<main role="main">
<!-- Main Header -->
<header>
<div class="carousel-default owl-carousel carousel-main carousel-nav-white background-dark text-center">
<div class="item">
<div class="s-12">
<img src="img/header.jpg" alt="">
<div class="carousel-content">
<div class="content-center-vertical line">
<div class="margin-top-bottom-80">
<!-- Title -->
<h1 class="text-white margin-bottom-30 text-size-60 text-m-size-30 text-line-height-1">ESPN SPORTS<br> PROGRAMMING</h1>
<div class="s-12 m-10 l-8 center"><p class="text-white text-size-14 margin-bottom-40">Welcome to ESPN's catalog of sports content available for broadcast worldwide.<br> Every year we distribute more than 6000 hours of live events, highlight series, <br> studio and scripted media to broadcasters across the globs.</p></div>
<div class="line">
<div class="s-10 m-10 l-3 center">
<a class="button button-white-stroke s-6" style="background-color:red;" href="/">+CONTACT US</a>
<a class="button button-white-stroke s-6" style="background-color:black;" href="/">WATCH DEMO</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<script type="text/javascript" src="js/responsee.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/template-scripts.js"></script>
</body>
</html>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-07 15:18:41
我认为你被分解成错误的部分了。需要分开的徽标和导航部分更容易调整。
nav {
display: flex;
align-items: center;
justify-content: space-around;
}
ul {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
flex: 2;
}
p img {
width: 100px;
}
p {
flex: 1;
}<nav>
<p><img src="https://cdn.iconscout.com/icon/free/png-256/espn-282356.png"></p>
<ul>
<li>HOME</li>
<li>SCHEDULE</li>
<li>PROGRAMMING</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>CONTACT</li>
<li>SELECTLANGUAGE</li>
</ul>
</nav>
Stack Overflow用户
发布于 2020-08-07 03:21:28
您可以这样做：
把这个放在头上
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">把这个放在你想让图标出现的地方
<a><i class="material-icons">menu</i></a>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63290323
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号