html - 我如何让我的链接靠近 Logo ？-6ren

html - 我如何让我的链接靠近 Logo ？

转载作者：行者123 更新时间：2023-11-28 03:40:14

我希望导航栏中的链接位于 Logo 旁边，并在右侧获得另一个链接 - 不在其他链接旁边 - 写着“文本”。我想要对解决方案的解释，因为如果我再次偶然发现这个问题，它会对我有所帮助。顺便说一句，我对 stackoverflow 很陌生。

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden
}

header {
  background-color: #191919;
  position: fixed;
  width: 100%;
  float: left;
  color: #edf9ff;
  min-height: 70px;
  border-bottom: #0fe216 3px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header a {
  text-decoration: none;
  text-transform: uppercase;
  color: #edf9ff;
}

a:hover {
  color: blue;
}

header ul {
  margin: 0;
}

header li {
  list-style-type: none;
  float: left;
  padding-right: 20px;
}

#showcase {
  padding-top: 100px;
  height: 750px;
  width: 100%;
  background-image: url(./images/BackgroundShowcase.jpg);
  background-size: 100% 100%;
}

#showcase h2 {
  font-size: 50px;
  color: green;
  text-align: center;
}

#showcase p {
  font-size: 20px;
  color: green;
  text-align: center;
}

#slideshow {
  position: relative;
  top: 350px;
}

#slideshow .Slides {
  width: 200px;
  padding-right: 15%;
  height: 200px;
}

.boxes {
  margin-top: 50px;
  margin-bottom: 50px;
}

.box {
  width: 30%;
  float: left;
  text-align: center;
}

.box img {
  width: 175px;
  height: 150px;
}

footer {
  background-color: #191919;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  clear: left;
}

footer p {
  text-align: center;
  color: white;
}

<!doctype html>
<html>

<head>
  <title>Mukhtar's Photography | Home </title>
  <link href="Home.css" rel="stylesheet" />
  <script type="application/javascript" src="Home.js"></script>
</head>

<body>

  <header>
    <div id="branding">
      <h2>PHOTOGRAPHY</h2>
    </div>
    <nav id="links">
      <ul>
        <li><a href="Home.html">Home</a></li>
        <li><a href="About.html">About</a></li>
        <li><a href="PhotoGallery.html">PHOTO GALLERY</a></li>
        <li><a href="#">VIDEO GALLERY</a></li>
      </ul>
    </nav>
  </header>
  <section id="showcase">
    <div class="container">
      <h2>Photography</h2>
      <p>Our photo's are always presente in the best quality possible with carefulness
      </p>
    </div>
  </section>
  <section class="boxes">
    <div class="box">
      <img src="./images/CameraIcon.png">
      <h2>Photography</h2>
      <p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
    </div>
    <div class="box">
      <img src="./images/CommunityICON.jpg">
      <h2>Guranteed!</h2>
      <p>If you are not satisfied with our work you will have an 80% refund</p>


    </div>
    <div class="box">
      <img src="./images/TimeIcon.png">
      <h2>Time Managment</h2>
      <p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
    </div>
  </section>
  <footer>
    <p>Note that any copyright &copy; is reserved</p>
  </footer>
</body>

</html>

最佳答案

你可以简单地将 logo 和 nav 包裹在一个新元素 (.d-inline-block) 中，将其设置为 display: inline-flex (这将把logo 和 nav 排成一排)，然后在页眉中添加一个链接。由于 header 是 display: flex; justify-content: space-between; Logo 和导航将位于一个元素的左侧，该元素位于左侧，新的“文本”链接将位于右侧。

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.container {
  width: 80%;
  margin: auto;
  overflow: hidden
}

header {
  background-color: #191919;
  position: fixed;
  width: 100%;
  float: left;
  color: #edf9ff;
  min-height: 70px;
  border-bottom: #0fe216 3px solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header a {
  text-decoration: none;
  text-transform: uppercase;
  color: #edf9ff;
}

a:hover {
  color: blue;
}

header ul {
  margin: 0;
}

header li {
  list-style-type: none;
  float: left;
  padding-right: 20px;
}

#showcase {
  padding-top: 100px;
  height: 750px;
  width: 100%;
  background-image: url(./images/BackgroundShowcase.jpg);
  background-size: 100% 100%;
}

#showcase h2 {
  font-size: 50px;
  color: green;
  text-align: center;
}

#showcase p {
  font-size: 20px;
  color: green;
  text-align: center;
}

#slideshow {
  position: relative;
  top: 350px;
}

#slideshow .Slides {
  width: 200px;
  padding-right: 15%;
  height: 200px;
}

.boxes {
  margin-top: 50px;
  margin-bottom: 50px;
}

.box {
  width: 30%;
  float: left;
  text-align: center;
}

.box img {
  width: 175px;
  height: 150px;
}

footer {
  background-color: #191919;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  clear: left;
}

footer p {
  text-align: center;
  color: white;
}

.d-inline-flex {
  display: inline-flex;
  align-items: center;
}

<!doctype html>
<html>

<head>
  <title>Mukhtar's Photography | Home </title>
  <link href="Home.css" rel="stylesheet" />
  <script type="application/javascript" src="Home.js"></script>
</head>

<body>

  <header>
    <div class="d-inline-flex">
      <div id="branding">
        <h2>PHOTOGRAPHY</h2>
      </div>
      <nav id="links">
        <ul>
          <li><a href="Home.html">Home</a></li>
          <li><a href="About.html">About</a></li>
          <li><a href="PhotoGallery.html">PHOTO GALLERY</a></li>
          <li><a href="#">VIDEO GALLERY</a></li>
        </ul>
      </nav>
    </div>
    <a href="#">text</a>
  </header>
  <section id="showcase">
    <div class="container">
      <h2>Photography</h2>
      <p>Our photo's are always presente in the best quality possible with carefulness
      </p>
    </div>
  </section>
  <section class="boxes">
    <div class="box">
      <img src="./images/CameraIcon.png">
      <h2>Photography</h2>
      <p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
    </div>
    <div class="box">
      <img src="./images/CommunityICON.jpg">
      <h2>Guranteed!</h2>
      <p>If you are not satisfied with our work you will have an 80% refund</p>


    </div>
    <div class="box">
      <img src="./images/TimeIcon.png">
      <h2>Time Managment</h2>
      <p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
    </div>
  </section>
  <footer>
    <p>Note that any copyright &copy; is reserved</p>
  </footer>
</body>

</html>

关于html - 我如何让我的链接靠近 Logo ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44251184/

文章推荐： c++ - unsigned char 的 gdb 表示形式——是否不一致？

文章推荐： CSS 无法在悬停期间根据需要定位菜单 block

文章推荐： html - 为什么我的 css 没有应用于我的下一个 div？

mysql - 无法识别的语句类型(靠近 IF)
我正在尝试编写一个 SQL 查询，当用户提供匹配的电子邮件和登录名时，该查询将更新我数据库中的“密码”记录。我写了下面的查询来尝试实现这一点: SET @password = 'password123
mysql - 开始和结束(靠近)mysql中的路由
我正在研究一个搜索系统，该系统应该检测起点和终点是否在(近 50 公里)路线上。我有许多路线作为点 [300k 行] 存储在 mysql 数据库中。 Structure id [primary] |
android - 靠近 "WHERE": syntax error - SQLite
我有一个方法，如果检查两个文本字段是否存在，然后重新调整记录 ID。我的方法是这样的: int getQueryMatch(String word, String meter) { SQLit
mysql:无法识别的语句类型。 (靠近 SCHEDULE)当尝试创建事件时间表时
我正在尝试创建事件计划，但 phpmyadmin 在左侧显示错误“无法识别的语句类型。 (靠近时间表)'。 MySql 版本是 10.1.8。我真的不明白这段代码或 MySql/phpmyadmin
java - 将 ImageView 靠近 TextView
我的问题是，当我尝试始终将 ImageView 与 TextView 和 SetText(); 放在相同的布局中时将文本写入 textview，ImageView 超出布局。是的，我知道我可以将图像放
php - 您的 SQL 语法有误 - 靠近“左”)
我是 php 编程的新手。我想应用插入查询，但出现此错误: You have an error in your SQL syntax; check the manual that correspon
mysql - #1064 - 你的 SQL 语法有错误...靠近 FROM
我对 MySQL 很陌生，但在遇到这个障碍之前已经取得了一些成功。任何帮助将不胜感激。我正在尝试根据表 2 中的匹配列更新表 1。MySQL 版本是 5.5。这是 2 个表(对相似的表/列名称表示歉
html - 如何使 div 靠近 body 没有任何边距？
我几乎不需要帮助，我是 CSS 和 HTML 的新手。我想让我的 div 非常接近没有任何边距的 body。我使用此代码，但它显示距顶部、左侧和右侧边距大约 50px 的边距是可以的，它与主体保持一
xcode9 - 输出新行时，使 Xcode 不自动滚动到(靠近)调试控制台的底部
(这与 iOS 相关) 这似乎是 Xcode 9 的一个新问题。我在 Xcode 8 中没有这个问题。如果我在 Xcode 的调试控制台中查看调试输出，并且我有意滚动到靠近顶部或中间的一行，当该应用程
SQL Server - 在需要条件的上下文中指定的非 bool 类型表达式，靠近 'RETURN'
在 SQL Server 2012 中使用以下查询出现此错误。在需要条件的上下文中指定的非 bool 类型表达式，靠近“RETURN”。 CREATE FUNCTION [dbo].[GetPMRe
python - sqlite3，python，创建表 - 靠近 "/": syntax error
我只想使用 python 和 sqlite 在数据库中创建一个表。但是，我需要用户提供我的数据库名称。我设法做到了这一点: #!/usr/bin/env python # -*- coding: ut
html - 为什么 box4 不能通过 css 靠近 box1？
我想让box4和box1靠的很近，为什么中间有空隙？我已经在左边漂浮了box4，为什么它不能放在左边？ div.box{ width:640
android - SQLite (1) 靠近 "M": syntaxs error
我在 android 中创建了这个表: String CREATE_TABLE="CREATE TABLE " + db_NAME + " ("
java - Java 代码中的 "misplaced construct(s)"靠近 catch
我无法用 Java 编译以下代码，错误是:构造错误。怎么了？ public class ExceptionsTutorial { public static void main(String[
android - SQLITE错误E/SQLiteLog:(1)靠近 "monthly": syntax error
嗨，我收到一条 SQL 错误，上面写着 E/SQLiteLog:(1)接近“每月”:语法错误我相信这可能与我的创建表语句有关 private static final String CREATE
android - 靠近 "COLUMN_NAME": syntax error (code 1) in SQLite
我在 Android 项目上工作，我在其中使用 SQLite 数据库，我编写了一个插入查询: sqliteDB_Obj.execSQL("INSERT INTO tbl_order_master (u
MySQL 错误 #1064 靠近 UNION 版本 : 5. 5.27
有什么问题？ SELECT post_title FROM wp_posts WHERE post_type='tutorial' AND post_status='publish' LIMIT 3;
hadoop - 编译语句时出错:失败:ParseException第4:22行不匹配，输入 ','期望<靠近 'array'在列表类型中
我正在尝试使用Hadoop Hive查询创建以下内容: create table tweets ( created_at string, entities struct >, media: array
android.database.sqlite.SQLiteException 靠近 DATABASE_TABLE_NAME 语法错误(代码 :1) while compiling organizationSetup
我正在开发一个Android应用程序，其中我创建了一个 Activity ，在该 Activity 中我一直在//Session For select_category page in Activit
python - 在需要条件的上下文中指定的非 bool 类型表达式，靠近 ')' - Pyodbc 和 SQL Server
我正在尝试使用 Python 3.7 和 pyodbc 更新数据库中的某些值，但不断收到错误错误 - 在需要条件的上下文中指定的非 bool 类型的表达式，靠近') ' def UpdateS

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 我如何让我的链接靠近 Logo ？