- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
基本上我试图将最后两项从我的 li 中的其他元素中拆分出来,以位于 .nav-content
容器的 flex-end。我意识到我的问题源于我目前将 width: 50%;
设置为我的 ul class="nav-links"
但这是我唯一的方法可以获得我的元素之间的间距来展示我正在尝试做的事情。理想情况下,我只想将最后两项 .login-button first-login
和 .login button second-login
移动到容器 .nav 的末尾-content
同时保持元素之间的间距到现在的样子。
我尝试在 .login-button
类上设置 margin-left: auto
但因为边距设置为 50%,它会尝试包裹按钮并剪切它们离开。我还尝试将宽度设置为 100%(.nav-content
容器的宽度),但元素之间的间距被取消了。
我知道可能有一个我没有看到的简单解决方案,非常感谢您的帮助!
.nav-content {
display: flex;
justify-content: flex-start;
align-items: center;
min-height: 8vh;
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin-top: 30px;
}
.nav-links {
display: flex;
justify-content: space-between;
width: 50%;
margin-left: 50px;
}
.nav-links li {
list-style: none;
}
.nav-links a {
text-decoration: none;
letter-spacing: 2px;
font-weight: 400;
font-size: 12px;
color: black;
text-transform: uppercase;
position: relative;
}
.nav-links a.item {
text-decoration: none;
letter-spacing: 2px;
font-weight: 700;
font-size: 12px;
color: black;
text-transform: uppercase;
position: relative;
}
.nav-links a.item:hover {
color: black;
}
.nav-links a.item:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: blue;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-links a.item:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.nav-links li a.login-button {
background: blue;
padding: 10px 30px;
color: white;
box-shadow: 0 15px 10px -10px rgba($color: #000000, $alpha: 0.2);
font-weight: 400;
text-transform: capitalize;
}
.nav-links li a.login-button:hover {
background: green;
}
<header id="header">
<section class="wrapper">
<nav class="nav-content">
<a href="#" class="logo">Logo</a>
<ul class="nav-links">
<li><a href="#" class="item">Item 1</a></li>
<li><a href="#" class="item">Item 2</a></li>
<li><a href="#" class="item">Item 3</a></li>
<li><a href="#" class="item">Item 4</a></li>
<li><a href="#" target="_blank" class="login-button first-login">First Login</a></li>
<li><a href="#" target="_blank" class="login-button second-login">Second Login</a></li>
</ul>
</nav>
</section>
</header>
最佳答案
是这样的吗?
将两个按钮用另一个 ul 包裹到容器的末尾...喜欢:
<ul class="nav-links navbar-nav ml-auto">
检查下面的代码
.nav-content {
display: flex;
justify-content: flex-start;
align-items: center;
min-height: 8vh;
font-family: 'Roboto', sans-serif;
font-weight: 400;
margin-top: 30px;
}
.nav-links {
display: flex;
justify-content: space-between;
width: 50%;
margin-left: 50px;
}
.nav-links li {
list-style: none;
}
.nav-links a {
text-decoration: none;
letter-spacing: 2px;
font-weight: 400;
font-size: 12px;
color: black;
text-transform: uppercase;
position: relative;
}
.nav-links a.item {
text-decoration: none;
letter-spacing: 2px;
font-weight: 700;
font-size: 12px;
color: black;
text-transform: uppercase;
position: relative;
}
.nav-links a.item:hover {
color: black;
}
.nav-links a.item:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: blue;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.nav-links a.item:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.nav-links li a.login-button {
background: blue;
padding: 10px 30px;
color: white;
box-shadow: 0 15px 10px -10px rgba($color: #000000, $alpha: 0.2);
font-weight: 400;
text-transform: capitalize;
float: right;
}
.nav-links li a.login-button:hover {
background: green;
}
<header id="header">
<section class="wrapper">
<nav class="nav-content">
<a href="#" class="logo">Logo</a>
<ul class="nav-links">
<li><a href="#" class="item">Item 1</a></li>
<li><a href="#" class="item">Item 2</a></li>
<li><a href="#" class="item">Item 3</a></li>
<li><a href="#" class="item">Item 4</a></li>
</ul>
<ul class="nav-links navbar-nav ml-auto">
<li><a href="#" target="_blank" class="login-button first-login">First Login</a></li>
<li><a href="#" target="_blank" class="login-button second-login">Second Login</a></li>
</ul>
</nav>
</section>
</header>
关于html - 使用 Flex 拆分导航项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55009439/
假设我有这个变量 var image = "image.jpg"; 我正在尝试拆分变量图像的内容并将 _thumbs 插入其中以获得类似 image_thumbs.jpg 的内容。 我该如何解决这个问
我有一个包含多个问题和答案的单元格,其组织方式类似于 CSV。因此,为了将所有这些问题和答案分开,使用逗号作为分隔符的简单拆分应该很容易分开。 不幸的是,有些值使用逗号作为小数分隔符。有没有办法避免这
这是简单的代码: import std.algorithm; import std.array; import std.file; void main(string[] args) { aut
我正在尝试解析一个看起来像的 txt 文件 A - 19 B - 2 C - 3 我正在使用扫描仪方法读取它并在“- ”中拆分,以便我的输出看起来像: A 19 B 2 C 3 但是它似乎没有正确拆分
我有这些网址字符串 file:///home/we/Pictures/neededWord/3193_n.jpg file:///home/smes/Pictures/neededWord/jds_2
我正在解析一个 CVS 文件,如下所示: "07555555555",25.70,18/11/2010,01/03/2011,N,133,0,36,,896,537,547,,Mr,John,Doe,
我在脚本中使用以下行返回 $folder 处所有文件夹的所有路径地点。 dir -recurse $folder|?{$_.PSIsContainer}|select -ExpandProperty
我正在尝试将字符串格式化为word+word+word 例如 “超音乐节”变成“超+音乐+节日” 我尝试过使用以下代码 query.split(" ").join("+"); 或 query.repl
我叫 luis,住在 arg。我有一个问题,无法解决。 **IN BASH** pwd /home/labs-perl ls file1.pl file2.pl **IN PERL** my $ls
我想从包 javax.json 中拆分 JsonArray,但我找不到完成这项工作的便捷方法。我查看了文档,只能想到迭代 JsonArray 并使用 JsonArrayBuilder 手动添加项目。
我希望在第一个 ':' 处拆分字符串,以防止字符串的第二部分包含 ':' 时出现问题。我一直在研究正则表达式,但仍然遇到一些问题,有人可以帮我吗?谢谢。 最佳答案 您可以使用overload of s
我想拆分列表的列表 ((A,1,2,3),(B,4,5,6),(C,7,8,9))进入: (A,1) (A,2) (A,3) (B,4) (B,5) ... 我试过rdd.flatMapValues(
我有一个文本文件,其中每一行都有数据。它看起来像这样: number0;text0 number1;text1 number2;text2 ..等等 所以我通过 xmlhttprequest 将该文本
问题很简单——比如说,我得到了函数,它接收数组作为参数 void calc(double[] data) 如何将这些数据“拆分”成两个子数组并像这样传递给子函数 calc_sub(data(0, le
我想显示来自 EMAIL_TEXT 数据库列的数据,在定义的字符处拆分列。出于某种原因,我的结果只打印第一行到我拆分字符串的位置,跳过其余行。这是我希望在每个“|”之后拆分的数据。 这里是要拆分的数据
我有一个动态数组,我想排除字符串的第一部分,但我不知道第一部分之后会有多少对象,我想将它们全部包含在一个新字符串中。 string = "text.'''hi''','''who''' '''are'
我想拆分 URL 的某些特定部分,这是我目前所做的。 var query = window.location.pathname.split( '/' ); query = window.locati
我有一条消息携带 XML(订单),其中包含多个同质节点(比如产品列表)以及其他信息(比如地址、客户详细信息等)。我必须使用另一个外部服务提供的详细信息来丰富每个“产品”,并返回带有丰富“产品”的相同完
我有一个动态生成的大字符串,我正在拆分它。 var myString="val1, val, val3, val4..... val400" 我对此字符串进行了简单的拆分, myString= myS
这个问题在这里已经有了答案: Java String split removed empty values (5 个答案) 关闭 7 年前。 我正在尝试使用 split(";") 将字符串转换为数组
我是一名优秀的程序员,十分优秀!