时间戳

首页 > 解决方案 > 如何在 CSS 和 HTML 上排列文本的顺序

html - 如何在 CSS 和 HTML 上排列文本的顺序

问题描述

我想知道如何在我的网站上安排文本的顺序。在下面的图片中，我想让文本以不同的顺序显示并更改文本之间的间距。

我想将其更改为“关于简历的工作”而不是“关于工作的简历”

另外，我稍后会在简历中添加正确的链接。

https://imgur.com/a/ooGVqFP

谢谢！

HTML
<body>
<div class="page-wrapper">
   <div class="home-page-wrapper">
      <div id="navbar">
     <a href="index.html" class="navbar-item" id="current-navbar-item" style="margin-left": 50px">Irene Li</a>
     <a href="work.html" class="navbar-item" id="work-navbar-item" style="margin-right": 1000px">Work</a>
     <a href="about.html" class="navbar-item" id="about-navbar-item" style="margin-right": 900px">About</a>
     <a href="link" target="_blank" class="link, navbar-item" id="resume-navbar-item" style="margin-right": 800px">Resume</a>
   </div>

CSS
#navbar {
width: 100%;
height: 100%;
font-family: 'Mukta', sans-serif;
}

.navbar-item {
    display: inline-block;
    margin-top: 40px;
    margin-left: 45px;
    text-decoration: none;
    padding-bottom: 3px;
transition: .2s linear;
color: #3f3f3f;
font-size: 18px;
}

.navbar-item: hover {
border-bottom: 1.5px solid currentColor;
cursor: pointer;
transition: .2s linear;
}

#current-navbar-item {
color: #3f3f3f;
border-bottom: 2px solid currentColor;
line-height: 15px;
}

#work-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
margin-right: 40px;
z-index: 5;
line-height: 15px;
}

#about-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
margin-right: 0.1em;
z-index: 5;
}

#resume-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
margin-right: 0.1em;
z-index: 5;
}

标签： htmlcss

解决方案

可能与display:flex它的order属性。

#navbar {
width: 100%;
height: 100%;
font-family: 'Mukta', sans-serif;
  display:flex;
  justify-content:space-between;
}

.flex_right {
  justify-content:flex-end;
  display:flex;
  margin-right:40px;
}

.navbar-item {
    display: inline-block;
    margin-top: 40px;
    margin-left: 45px;
    text-decoration: none;
    padding-bottom: 3px;
transition: .2s linear;
color: #3f3f3f;
font-size: 18px;
}

.navbar-item: hover {
border-bottom: 1.5px solid currentColor;
cursor: pointer;
transition: .2s linear;
}

#current-navbar-item {
color: #3f3f3f;
border-bottom: 2px solid currentColor;
line-height: 15px;
}

#work-navbar-item {
color: #3f3f3f;
line-height: 15px;
z-index: 5;
line-height: 15px;
  order:1; /* this is first */
}

#about-navbar-item {
color: #3f3f3f;
line-height: 15px;
z-index: 5;
  order:2; /* this is second */
}

#resume-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
z-index: 5;
  order:3; /* this is third */
}
<div class="page-wrapper">
   <div class="home-page-wrapper">
      <div id="navbar">
        <div class="flex_left">
     <a href="index.html" class="navbar-item" id="current-navbar-item" style="margin-left": 50px">Irene Li</a>
      </div>
                                                                                                 <div class="flex_right">
     <a href="work.html" class="navbar-item" id="work-navbar-item" style="margin-right": 1000px">Work</a>
     <a href="about.html" class="navbar-item" id="about-navbar-item" style="margin-right": 900px">About</a>
     <a href="link" target="_blank" class="link navbar-item" id="resume-navbar-item" style="margin-right": 800px">Resume</a>
        </div>
   </div>

order我用财产改变了订单。如你看到的：

#navbar {
width: 100%;
height: 100%;
font-family: 'Mukta', sans-serif;
  display:flex;
  justify-content:space-between;
}

.flex_right {
  justify-content:flex-end;
  display:flex;
  margin-right:40px;
}

.navbar-item {
    display: inline-block;
    margin-top: 40px;
    margin-left: 45px;
    text-decoration: none;
    padding-bottom: 3px;
transition: .2s linear;
color: #3f3f3f;
font-size: 18px;
}

.navbar-item: hover {
border-bottom: 1.5px solid currentColor;
cursor: pointer;
transition: .2s linear;
}

#current-navbar-item {
color: #3f3f3f;
border-bottom: 2px solid currentColor;
line-height: 15px;
}

#work-navbar-item {
color: #3f3f3f;
line-height: 15px;
z-index: 5;
line-height: 15px;
  order:3;
}

#about-navbar-item {
color: #3f3f3f;
line-height: 15px;
z-index: 5;
  order:2;
}

#resume-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
z-index: 5;
  order:1;
}
<div class="page-wrapper">
   <div class="home-page-wrapper">
      <div id="navbar">
        <div class="flex_left">
     <a href="index.html" class="navbar-item" id="current-navbar-item" style="margin-left": 50px">Irene Li</a>
      </div>
                                                                                                 <div class="flex_right">
     <a href="work.html" class="navbar-item" id="work-navbar-item" style="margin-right": 1000px">Work</a>
     <a href="about.html" class="navbar-item" id="about-navbar-item" style="margin-right": 900px">About</a>
     <a href="link" target="_blank" class="link navbar-item" id="resume-navbar-item" style="margin-right": 800px">Resume</a>
        </div>
   </div>

推荐阅读