请参阅 codepen链接

ccs是用scss编译的

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

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

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

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

#1楼 票数:0

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

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

#2楼 票数:0

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

 /* 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>

#3楼 票数:0

从类.nav__item 中删除显示:flex

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

  ask by sltdev translate from so

未解决问题?本站智能推荐:

2回复

如何更改换行文本-css的颜色和对齐方式

如何更改自动换行的颜色和对齐方式? 基本上,我有一个包含一些内容的div,并且由于空间问题,文本是否换行。 然后,我希望第二行是绿色,并右对齐。 我创建了一个简单的小提琴。.需要第二行是正确对齐和颜色更改。 SCSS: HTML: 的jsfiddle 谢谢
1回复

Flexbox-水平对齐垂直文本

所以我正在使用一个flexbox来容纳这些元素: 看起来像那样。 虽然您可以说,但我在水平居中对齐文本时遇到困难。 我将文本垂直旋转90度,变换原点在左侧。 我可能应该包括HTML。
1回复

根据颜色变量生成背景和文本类

我希望利用SASS规则(@mixin,@ expand等)和/或控制指令(@ if,@ for,@each等)为我定义的颜色变量生成类。 下面是我目前使用的一个示例,但我知道我可以进一步简化这一点,以减少冗余。 我尝试了一些不同的方法,但我总是遇到映射冲突。 我想保留对象中的映射变量,
2回复

AngularMaterial文本区域占位符和文本对齐问题

我有一个角的textarea,看起来如下: 在角度上,我有: CSS: 这里有两个问题。 没有看到应该在textarea上方浮动的placeholder 。 文本textarea中的文本开头(“这是虚拟文本”)被移到右侧。 为什么会这样呢? 我可能做错了什么?
3回复

列中的CSS中心图像和文本

我有以下几点。 如您所见,图像和文本在列的左侧对齐。 题 如何使图像和文字居中? 我试过了text-align: center; 在列,文本和图像上。 全部无效。 任何帮助表示赞赏。 更新 我正在使用Ionic2生成原始html代码: html 的CSS
1回复

如何将表格与flexbox对齐?

我想对齐我所有的表单输入,例如前两个输入(房间,游客)。 (相同宽度)我使用了flexbox,但它仅在两个元素中起作用,而其他元素则不行。 我对其他输入进行了与前两个输入相同的样式,但无法正常工作。 按钮也包括在flex中,就像输入一样。 每行包含两个输入。 有我的反应代码: sa
2回复

垂直对齐离子图标和文本

我想发布一种日期选择器,日期在中间,然后将左/右切换为上一个或下一个日期。 我目前在格式化视图时遇到问题。 我想使离子图标(左和右)和文本{{displayDate}}垂直对齐。 我尝试了以下操作,但没有想要的结果。 HTML CSS 当前的外观:
3回复

如何使用css根据文本值更改文本颜色?

我有显示足球队统计数据的表格数据。 有一列有如下字母: “W”(赢) “L”(输) “D”(平局) 那是字母呈现为单独的列,值是动态的,我需要应用不同的颜色: 如果带有“W”,则文本应为绿色 如果是“L”色红色 如果是“D”色灰色有没有办法通过 CSS 做到这一点?