Html 将列表宽度调整为包含的链接,而不是包含的子列表
我有一个水平Html 将列表宽度调整为包含的链接,而不是包含的子列表,html,css,Html,Css,我有一个水平flex列表,每个项目都包含一个链接和另一个子列表 我希望第一代的itemsli与包含链接中的单词一样宽,子列表的宽度与需要的宽度一样宽,可以单击,而不是包装单词 尝试选项1:我将第一个li的宽度设置为40px,子ul的宽度设置为200px-->子链接不再可单击 已尝试选项2:我将subul的宽度设置为10px,并且空白:nowrap,和位置:相对;z指数:5到最终链接-->子链接可单击。。。但是,这是最佳实践吗 <ul id="menu-mobile-en"
flex
列表,每个项目都包含一个链接和另一个子列表
我希望第一代的itemsli
与包含链接中的单词一样宽,子列表的宽度与需要的宽度一样宽,可以单击,而不是包装单词
尝试选项1:我将第一个li
的宽度设置为40px,子ul
的宽度设置为200px-->子链接不再可单击
已尝试选项2:我将subul
的宽度设置为10px,并且空白:nowrap代码>,和位置:相对;z指数:5代码>到最终链接-->子链接可单击。。。但是,这是最佳实践吗
<ul id="menu-mobile-en" class="menu">
<li id="menu-item-20858" class="retail-only-element menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-20858 focus"><a href="#">SHOP</a><button aria-expanded="false" class="dropdown-toggle"><span class="screen-reader-text">Expand child menu</span></button>
<ul class="sub-menu toggled-on">
<li id="menu-item-9404" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9404"><a href="https://staging.mysite.com/all/">All</a></li>
<li id="menu-item-39924" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-39924"><a href="https://staging.mysite.com/eshop2/new/">New</a></li>
<li id="menu-item-4352" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4352"><a href="https://staging.mysite.com/eshop2/boxers-for-men/">Boxers</a></li>
<li id="menu-item-4357" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4357"><a href="https://staging.mysite.com/eshop2/briefs/">Briefs</a></li>
<li id="menu-item-4358" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4358"><a href="https://staging.mysite.com/eshop2/tank-tops/">Tank Tops</a></li>
<li id="menu-item-4355" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4355"><a href="https://staging.mysite.com/eshop2/t-shirts/">T-shirts</a></li>
<li id="menu-item-4353" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4353"><a href="https://staging.mysite.com/eshop2/henleys/">Henleys</a></li>
<li id="menu-item-4354" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4354"><a href="https://staging.mysite.com/eshop2/longjohns/">Longjohns</a></li>
<li id="menu-item-4356" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4356 focus"><a href="https://staging.mysite.com/eshop2/accessories/">Accessories</a></li>
<li id="menu-item-34091" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-34091"><a href="https://staging.mysite.com/eshop2/last-chance/">Last chance</a></li>
</ul>
</li>
</ul>
这看起来有用吗
注意:运行代码段并检查元素
/*内部切换菜单*/
菜单{
显示器:flex;
左边距:7px;
边际上限:0px;
}
菜单a{
字号:900;
显示:内联块;
}
菜单按钮{
位置:绝对位置;
右:10px;
顶部:10px;
}
ul.菜单li.菜单项a{
填充:8px0;
}
ul.菜单li.菜单项ul.子菜单{
显示器:flex;
位置:绝对位置;
弯曲方向:立柱;
左边距:0;
}
ul.菜单li.菜单项ul.子菜单li a{
字体大小:正常;
颜色:黑色;
文本转换:大写;
}
这看起来有用吗
注意:运行代码段并检查元素
/*内部切换菜单*/
菜单{
显示器:flex;
左边距:7px;
边际上限:0px;
}
菜单a{
字号:900;
显示:内联块;
}
菜单按钮{
位置:绝对位置;
右:10px;
顶部:10px;
}
ul.菜单li.菜单项a{
填充:8px0;
}
ul.菜单li.菜单项ul.子菜单{
显示器:flex;
位置:绝对位置;
弯曲方向:立柱;
左边距:0;
}
ul.菜单li.菜单项ul.子菜单li a{
字体大小:正常;
颜色:黑色;
文本转换:大写;
}
一个片段可能会很好,因为索引正在工作。这是一个干净的解决方案吗?一个片段将是greatz索引正在工作。这是一个干净的解决方案吗?
/* Inner toggled menu */
.handheld-navigation {
color: black;
position: fixed;
width: 100%;
top: 85px;
bottom: 0;
background-color: white;
font-size: 15px;
letter-spacing: 3px
}
.handheld-navigation ul.menu {
display:flex;
margin-left: 7px;
margin-top: 0px;
}
.handheld-navigation ul.menu a {
font-weight: 900;
display: inline-block;
}
.handheld-navigation ul.menu li.menu-item a {
padding: 8px 0;
}
.handheld-navigation ul.menu li.menu-item ul.sub-menu {
display:flex;
flex-direction: column;
margin-left: 0;
}
.handheld-navigation ul.menu li.menu-item ul.sub-menu li a {
font-weight: normal;
color: black;
text-transform: uppercase;
}