如何在标题处的导航旁边插入文本

我需要键入哪个代码才能在我的标题nav上制作文本或徽标？

我希望我的文字或徽标在右行，而我的navi则只是在导航位置的左站点上。

nav {
  position: fixed;
  width: 98%;
  height: 50px;
  background-color: red;
  background-repeat: no-repeat;
  z-index: 99;
  text-align: center;
}

<header>
  <nav>
    <a href="index.html"><strong>H</strong>ome</a>
    <a href="mywork.html"><strong>M</strong>yWork</a>
    <a href="about.html"><strong> A</strong>bout</a>
    <a href="contact.html"><strong> C</strong>ontact</a>
  </nav>
</header>

您的问题不清楚，但我认为这是您要寻找的：

nav{ 
        display: inline-block;
        position: fixed;
        width: 98%;
        height: 50px;
        background-color: (red);
        background-repeat: no-repeat;
        z-index: 99;
        text-align: center;
}

<head>        
        <meta charset="utf-8">
        <meta name="description" content=" min portfolio ">
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
    <a id="logo" href="index.html"><strong>L</strong>ogo</a>
    <nav>
    
    <a href="index.html"><strong>H</strong>ome</a>
    <a href="mywork.html"><strong>M</strong>yWork</a>
    <a href="about.html"><strong> A</strong>bout</a>
    <a href="contact.html"><strong> C</strong>ontact</a>
    </nav>
    
    
    
    </header>    
<style>

尝试以下：

nav{ 
  position: fixed;
  width: 98%;
  height: 50px;
  background-color: (red);
  background-repeat: no-repeat;
  z-index: 99;
  text-align: center;
}
span{
  display:block;
  float:right;
}

<header>
  <nav>
    <a href="index.html"><strong>H</strong>ome</a>
    <a href="mywork.html"><strong>M</strong>yWork</a>
    <a href="about.html"><strong> A</strong>bout</a>
    <a href="contact.html"><strong> C</strong>ontact</a>
    <span>Khan Portfolio</span>
  </nav>
</header>

我在布局上获得了一些自由，对您的意图做出了一些假设。

我将您在<nav>上的样式应用于<header>，似乎更有意义。
我在文本/徽标上使用了绝对定位，以便将其从正常文档流中取出而不会影响其他元素的布局。

body {
  margin: 0;
}
header {
  position: relative;
  height: 50px;
  background-color: red;
  line-height: 50px;
  text-align: center;
}
h1 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0 0.5rem;
  font-size: 1.5rem;
}
nav > a {
  padding: 0 0.5rem;
}

<header>
  <h1>Khan Learner</h1>
  <nav>
    <a href="index.html"><strong>H</strong>ome</a>
    <a href="mywork.html"><strong>M</strong>y Work</a>
    <a href="about.html"><strong> A</strong>bout</a>
    <a href="contact.html"><strong> C</strong>ontact</a>
  </nav>
</header>

相关内容

最新更新

热门标签：