Question

我需要输入哪些代码才能在我的标题导航栏上输入文字或徽标？

我希望我的文字或徽标位于导航位置左侧的导航栏右侧。

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 1

你的问题不明确，但我认为这就是你要找的东西：

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>

Answer 2

试试这个：

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>

Answer 3

我对布局采取了一些自由，对你可能想要的东西做了一些假设。

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: