CSS Flexbox - Bg 颜色和文本不对齐

Question

请参阅 codepen链接。

ccs是用scss编译的

请在css页面上向下滚动超过一半以避免reset代码。

问题：与左侧相比，导航背景右侧的两个按钮和文本都不同步。

请问有人可以发现问题吗？

接受有关我的 B__E__M 造型的建议

Answer 1

问题是：左侧导航中的li有display: list-item; 但是右侧导航中的li display: flex;

将.nav__ul--rt的宽度增加到 25% 并将正确的属性赋予右侧的 li 以使其正确对齐。 此观察基于您的布局。

Answer 2

为什么不把背景颜色放在父级上？

 /* Box sizing rules */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove default padding */ ul[class], ol[class] { padding: 0; } /* Remove default margin */ body, h1, h2, h3, h4, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd { margin: 0; } /* Set core body defaults */ body { min-height: 100vh; scroll-behavior: smooth; text-rendering: optimizeSpeed; line-height: 1.5; font-family: Arial, Helvetica, sans-serif; } /* Remove list styles on ul, ol elements with a class attribute */ ul[class], ol[class] { list-style: none; } /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; } /* Make images easier to work with */ img { max-width: 100%; display: block; } /* Natural flow and rhythm in articles by default */ article > * + * { margin-top: 1em; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } /* Remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { * { -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important; -webkit-animation-iteration-count: 1 !important; animation-iteration-count: 1 !important; -webkit-transition-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /*````````````````the actual code below`````````````*/ .nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; height: 100px; background-color: #ecdfc8; } .nav__img { -webkit-box-flex: 1; -ms-flex: 1 1 10%; flex: 1 1 10%; } .nav img { height: 100px; margin: auto; } .nav__section { -webkit-box-flex: 8; -ms-flex: 8 1 90%; flex: 8 1 90%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .nav__ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .nav__ul--lf { width: 50%; } .nav__ul--rt { width: 15%; } .nav__item { display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #df7861; border-radius: 5px; -webkit-transition: background-color 1s; transition: background-color 1s; padding: 10px 15px; } .nav a { color: #111; text-decoration: none; font-weight: 300; } .nav__item:hover { background-color: #df7861; background-color: #ecdfc8; } /*# sourceMappingURL=style.css.map */

 <header class="header"> <nav class="header__nav nav"> <span class="nav__img b1"> <img src="./img/plant-logo.png" alt="logo"> </span> <section class="nav__section nav_section--1 b2"> <ul class="nav__ul nav__ul--lf b3"> <li class="nav__item"> <a href="www.google.com">Home</a> </li> <li class="nav__item"> <a href="www.google.com">Product</a> </li> <li class="nav__item"> <a href="www.google.com">Learn</a> </li> </ul> <ul class="nav__ul nav__ul--rt b4"> <li class="nav__item"> <a href="www.google.com">Contact</a> </li> <li class="nav__item"> <a href="www.google.com"><span>Sign in</span></a> </li> </ul> </section> </nav> </header>

Answer 3

从类.nav__item 中删除显示：flex

.nav__item {
   display: -webkit-box;
   display: -ms-flexbox;
}