gpt4 book ai didi

css - 试图让 last li 拉伸(stretch)到屏幕边缘

转载 作者:行者123 更新时间:2023-11-28 17:32:07 25 4
gpt4 key购买 nike

我已经使用背景颜色、边框半径和负左边距设置了水平菜单的样式(可能被指定为负边距,但我不知道任何其他方式),您可以在这里看到:http://tinyurl.com/nu6ltcy

CSS:

#menu-menu-1        {text-align: left; background: #FBBF7E;}
#menu-menu-1 li {float: left; width: 26%; min-width: 150px; border: 1px solid #766341; border-width: 0; border-radius: 0 0 0 35px; -webkit-border-radius: 0 0 0 35px; -moz-border-radius: 0 0 0 35px;}
#menu-menu-1 li a {display: block; height: 62px; width: 100%; color: #fff; line-height: 62px; text-align: center;}
#menu-menu-1 li.current-menu-item a {font-weight: bold;}
#menu-menu-1 li#menu-item-13 {background: #766341; }
#menu-menu-1 li#menu-item-14 {background: #F78F1E; margin-left: -35px;}
#menu-menu-1 li#menu-item-17 {background: #F7A54C; margin-left: -35px;}
#menu-menu-1 li#menu-item-15 {background: #FBBF7E; margin-left: -35px;}

如您所见,由于负边距,第 4 个(最后一个)li 在距离边缘约 30 像素处停止,有人可以建议如何解决此问题吗?还是在不使用负边距的情况下使 li 重叠的更好方法?

谢谢

最佳答案

实际上,为此使用负边距也不错..

我会做些什么来让它合适,是这样的:

fiddle

CSS

#menu-menu-1 li {
float: left;
width: 30%; /* 4 li's (25%) plus the 5% negative margin. */
min-width: 150px;
box-sizing: border-box;
margin-left: -5%; /* 5% is high enough to hide border edges in lower resolutions */
}
#menu-menu-1 li#menu-item-13 {
background: #FEF4E8;
margin: 0px;
width: 25%; /* No negative margin so width stays 25% */
}

关于css - 试图让 last li 拉伸(stretch)到屏幕边缘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25832956/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com