时间戳

首页 > 解决方案 > 我在导航栏中的第一个列表项“全部”文本不像其他内容那样居中

html - 我在导航栏中的第一个列表项“全部”文本不像其他内容那样居中

问题描述

我正在处理的这个菜单登录页面的标题中有一个导航栏，由于某种原因，导航栏中的第一个列表项（“全部”）不是中心，其余的列表项是。列表项周围有边框。有没有办法让“所有”列表项文本像其他列表项一样居中。

#header #NavBar {
    text-align: center;
    font-size: 20px;   
}

#header #NavBar li {
    display: inline;
    
    margin-left: 10px;
}

#header p {
  font-size: 30px;
  text-align: center;
}

#header a {
    text-decoration: none;
    padding: 5px;
    color:#ffcc00;
    font-weight:100;  
}

#header #NavBar #all {
  border-style: solid;
  border-color:#ffcc00;
  border-width: 2px;
  border-radius: 5px;
}

#header #NavBar #all {
  border-style: solid;
  border-color:#ffcc00;
  border-width: 2px;
  border-radius: 5px;
}

#header #NavBar #breakfast {
  border-style: solid;
  border-color:#ffcc00;
  border-width: 2px;
  border-radius: 5px;
}

#header #NavBar #lunch {
  border-style: solid;
  border-color:#ffcc00;
  border-width: 2px;
  border-radius: 5px;
}

#header #NavBar #dinner {
  border-style: solid;
  border-color:#ffcc00;
  border-width: 2px;
  border-radius: 5px;
}

#header img  {
    max-height: 200px;
    margin-bottom: -65px;
}

  
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Brunch Menu</title>
    <link rel="stylesheet" href="main.css" />
</head>
<header id="header">
    <img id="logo" src="https://st2.depositphotos.com/1035649/7783/v/600/depositphotos_77833254-stock-illustration-restaurant-logo.jpg">
    <p>Menu</p>
    <ul id="NavBar">
        <li id="all"><a href="#">All<a /></li>
        <li id="breakfast"><a href="#">Breakfast<a/></li>
        <li id="lunch"><a href="#">Lunch<a/></li>
        <li id="dinner"><a href="#">Dinner<a/></li>
    </ul>
</header>

在此处输入图像描述

标签： htmlcss

解决方案

你有一些错误。

首先，你的锚标签必须像<a href="#"></a>not<a/>

那么你的css一定是这样的。检查这 3 个标签进行我所做的更改。添加#logo和header标签。删除所有内容#header img并使用我使用的flex。

#header img  {
  /* Use img like this */
  display: block;
  width: 100%;
  height: auto;
}

#logo {
  max-width: 100px;
}

header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  /* Remove this after you understand flex */
  border: 1px dashed red;
}

最后像这样改变你的标记

<header id="header">
  <img id="logo" src="https://st2.depositphotos.com/1035649/7783/v/600/depositphotos_77833254-stock-illustration-restaurant-logo.jpg">
  <p>Menu</p>
  <ul id="NavBar">
    <li id="all"><a href="#">All</a></li>
    <li id="breakfast"><a href="#">Breakfast</a></li>
    <li id="lunch"><a href="#">Lunch</a></li>
    <li id="dinner"><a href="#">Dinner</a></li>
  </ul>
</header>

推荐阅读