Question

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

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

此外，稍后我将在简历中添加适当的链接。

谢谢！

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

Answer 1

可能带有#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>属性更改了订单。如您所见：

def is_user_active?(user)
  if user.last_active_at < 15.minutes.ago
    true
  else
    false
  end
end

{{1}}

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

1 个答案: