如何解决li内元素的位置和高度
我目前在链接列表方面有两个问题。 首先,我需要展示
| button | | text | | button |
在李中并排。第一个按钮位于左侧,然后是文本,第二个按钮位于li的右侧。两个按钮的高度必须与中间文本的高度相同。
但是它们一定不能像整个li一样高,因为li可以包含更多元素,例如子菜单,然后它就会变得很高。
有什么想法(每个li除了一张桌子)? 非常感谢您的帮助。它确实看起来很简单(我想是的),但同时我真的很沮丧,因为我没有完成...
button {
border: solid 1px #ccc;
}
a {
display: inline-block;
margin-right: 0;
background-color: #ffffff;
margin-left: 0;
}
.btn-left {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 100%;
border-right: solid 1px #333;
}
.btn-right {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 100%;
border-left: solid 1px #333;
}
ul {
border: solid 1px #333;
list-style-type: none;
padding: 0;
}
li {
background-color: #ccc;
position: relative;
}
li a {
display: inline-block;
}
.clearfix {
clear: both;
}
<ul>
<li>
<button class="btn-left">Btn 1</button>
<a href="#">
Lorem ipsum dolur sit Link Lorem ipsum dolur sit Lorem ipsum dolur sit Link Lorem ipsum dolur sit Lorem ipsum dolur sit Link Lorem ipsum dolur sit
</a>
<button class="btn-right">Btn 2</button>
<!-- here can be other content,e.g. a submenu:
<ul class="sub-menu">
<li>Lorem ipsum</li>
<li>dolor sit</li>
</ul>
-->
</li>
</ul>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。