时间戳

首页 > 解决方案 > 如何将标题放在ul旁边

html - 如何将标题放在ul旁边

问题描述

我有一个用于网站导航的 ul 和一个标题，我希望它们彼此相邻，但一个在顶部。我尝试将 home 设为一个特定的类并使其正确对齐，但我无法让它发挥作用。

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: right;
}

li class="home" {
  text-align: left;
}

li {
  display: inline-block;
  margin: 10px;
}
<ul>
  <li class="home">Home</li>
  <li>Shop</li>
  <li>About</li>
  <li>Contact</li>
</ul>
<h1>Company</h1>

liclass="home"是我尝试将其左对齐我希望公司在 ul 旁边，但左对齐

我在 Google 上搜索了不同的选项，但似乎没有一个有效。我该如何解决我的问题？

标签： htmlcss

解决方案

你可以这样做。

html

<div>
  <ul>
    <li class="home">Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
  <h1>Company</h1>
</div>

css

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: right;
}

li class="home" {
  text-align: left;
}

li {
  display: inline-block;
  margin: 10px;
}

h1 {
  margin: 0;  
}

div {
  display: flex
}

如果您想在左侧显示徽标，请使用这样的 html。

<div>
  <h1>Company</h1>
  <ul>
    <li class="home">Home</li>
    <li>Shop</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

如果您想在左侧显示徽标并在右侧显示菜单，请使用div

div {
  display: flex;
  justify-content: space-between;
}

如果您有任何问题，请告诉我。

推荐阅读