如何在li最后一个孩子的同一行创建水平线(how to create horizontal line in same row with li last

编程入门行业动态更新时间:2024-10-10 14:30:43

如何在li最后一个孩子的同一行创建水平线(how to create horizontal line in same row with li last-child)

想问如何创建与CSS的行如下图所示？该行继续在菜单下，但不在04旁边。请帮助我。谢谢。 https://codepen.io/rae0724/pen/xWMRgd

<div class="menu-wrapper"> <ul class="menu"> <li><a href="#1">1</a></li> <li><a href="#2">2</a></li> <li><a href="#3">3</a></li> <li><a href="#4">4</a></li> </ul> </div> .menu-wrapper { position:fixed; top: 0; left: 0; height: auto; z-index: 9; width: 100%; } .menu{ margin: 0; padding: 0 0 0 20px; } .menu li { display: inline-block; margin: 10px; } .menu li a{ text-decoration:none; color: blue; padding: 6px 12px; display: block; }

want to ask how can I create line with css as the picture below? The line keep going under the menu, but not next to the 04. Please help me. Thank you. https://codepen.io/rae0724/pen/xWMRgd

最满意答案

.menu-wrapper {
	position:fixed;
	top: 0;
	left: 0;
	height: auto;
	z-index: 9;
	width: 100%;
}
.menu{
	margin: 0;
	padding: 0 0 0 20px;
}
.menu li {
	display: inline-block;
	margin: 10px;
}
.menu li a{
	text-decoration:none;
	color: blue;
	padding: 6px 12px;
	display: block;
}
.menu:after {
   content: " ";
    width: 150px;
    height: 2px;
    background: red;
    position: absolute;
    top: 25px;
} 
  <div class="menu-wrapper">
  <ul class="menu">
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
  </ul>
</div> 
  
 
 
 
  
  .menu-wrapper {
	position:fixed;
	top: 0;
	left: 0;
	height: auto;
	z-index: 9;
	width: 100%;
}
.menu{
	margin: 0;
	padding: 0 0 0 20px;
}
.menu li {
	display: inline-block;
	margin: 10px;
}
.menu li a{
	text-decoration:none;
	color: blue;
	padding: 6px 12px;
	display: block;
}
.menu:after {
   content: " ";
    width: 150px;
    height: 2px;
    background: red;
    position: absolute;
    top: 25px;
} 
  <div class="menu-wrapper">
  <ul class="menu">
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
  </ul>
</div>

更多推荐

本文发布于:2023-08-01 18:52:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1364488.html