可以在此设置宽度为自动?(Possible to set width as auto in this?)
第一个例子展示了我想要实现的目标。 但是,我无法将宽度设置为.sub因为可能会有新项添加到.sub 。 因此宽度应相应增加。
但是,如果没有设置宽度,结果如示例2所示。
有什么办法让.sub项目在保持水平布局的同时增长?
.wrap, .wrap2 { width: 100px; } .container { width:100%; background: #ccc; } .item { position:relative; } .sub { background: #eee; position: absolute; left:100px; top:0; width: 340px; } .sub li { display:inline-block; border-left: 1px solid black; padding: 0 10px; &:first-child { padding: 0 10px 0 0; border-left:0; } } .wrap2 .sub { width:auto; }<h4>Example1. This is what I want. But, without setting width to .sub</h4> <div class="wrap"> <div class="container"> <ul> <li class="item item1"> <a href="">hello</a> <ul class="sub"> <li class="item item1">hello world</li> <li class="item item2">world hello</li> <li class="item item3">foo bar</li> <li class="item item4">bar foo</li> </ul> </li> <li class="item item2">world</li> <li class="item item3">foo</li> <li class="item item4">bar</li> </ul> </div> </div> <h4>Example2. This is what happens when no width is set to .sub</h4> <div class="wrap2"> <div class="container"> <ul> <li class="item item1"> <a href="">hello</a> <ul class="sub"> <li class="item item1">hello world</li> <li class="item item2">world hello</li> <li class="item item3">foo bar</li> <li class="item item4">bar foo</li> </ul> </li> <li class="item item2">world</li> <li class="item item3">foo</li> <li class="4item item4">bar</li> </ul> </div> </div>The first example shows what I'm trying to achieve. But, I can't set a width to .sub because there might be new items added to .sub. Hence the width should increment accordingly.
But, without setting a width, the result is as shown in example 2.
Any ways to let .sub items grow while maintaining the horizontal layout?
.wrap, .wrap2 { width: 100px; } .container { width:100%; background: #ccc; } .item { position:relative; } .sub { background: #eee; position: absolute; left:100px; top:0; width: 340px; } .sub li { display:inline-block; border-left: 1px solid black; padding: 0 10px; &:first-child { padding: 0 10px 0 0; border-left:0; } } .wrap2 .sub { width:auto; }<h4>Example1. This is what I want. But, without setting width to .sub</h4> <div class="wrap"> <div class="container"> <ul> <li class="item item1"> <a href="">hello</a> <ul class="sub"> <li class="item item1">hello world</li> <li class="item item2">world hello</li> <li class="item item3">foo bar</li> <li class="item item4">bar foo</li> </ul> </li> <li class="item item2">world</li> <li class="item item3">foo</li> <li class="item item4">bar</li> </ul> </div> </div> <h4>Example2. This is what happens when no width is set to .sub</h4> <div class="wrap2"> <div class="container"> <ul> <li class="item item1"> <a href="">hello</a> <ul class="sub"> <li class="item item1">hello world</li> <li class="item item2">world hello</li> <li class="item item3">foo bar</li> <li class="item item4">bar foo</li> </ul> </li> <li class="item item2">world</li> <li class="item item3">foo</li> <li class="4item item4">bar</li> </ul> </div> </div>最满意答案
你可以在你的.sub设置display:flex
.wrap { width: 100px; } .container { width: 100%; background: #ccc; } .item { position: relative; } .sub { background: #eee; position: absolute; left: 100px; top: 0; display: flex } .sub li { display: inline-block; border-left: 1px solid black; padding: 0 10px; } .sub li:first-child { padding: 0 10px 0 0; border-left: 0; }<h4>Example1. This is what I want. But, without setting width to .sub</h4> <div class="wrap"> <div class="container"> <ul> <li class="item item1"> <a href="">hello</a> <ul class="sub"> <li class="item item1">hello</li> <li class="item item2">world</li> <li class="item item3">foo</li> <li class="item item4">bar</li> </ul> </li> <li class="item item2">world</li> <li class="item item3">foo</li> <li class="item item4">bar</li> </ul> </div> </div>编辑:根据您更新的问题,您可以使用其他人已经指出的whitespace:nowrap
.wrap { width: 100px; } .container { width: 100%; background: #ccc; } .item { position: relative; } .sub { background: #eee; position: absolute; left: 100px; top: 0; white-space:nowrap } .sub li { display: inline-block; border-left: 1px solid black; padding: 0 10px; } .sub li:first-child { padding: 0 10px 0 0; border-left: 0; }<h4>Example1. This is what I want. But, without setting width to .sub</h4> <div class="wrap"> <div class="container"> <ul> <li class="item item1"> <a href="">hello</a> <ul class="sub"> <li class="item item1">hello world</li> <li class="item item2">world hello</li> <li class="item item3">foo</li> <li class="item item4">bar</li> </ul> </li> <li class="item item2">world</li> <li class="item item3">foo</li> <li class="item item4">bar</li> </ul> </div> </div>you can set display:flex in your .sub
.wrap { width: 100px; } .container { width: 100%; background: #ccc; } .item { position: relative; } .sub { background: #eee; position: absolute; left: 100px; top: 0; display: flex } .sub li { display: inline-block; border-left: 1px solid black; padding: 0 10px; } .sub li:first-child { padding: 0 10px 0 0; border-left: 0; }<h4>Example1. This is what I want. But, without setting width to .sub</h4> <div class="wrap"> <div class="container"> <ul> <li class="item item1"> <a href="">hello</a> <ul class="sub"> <li class="item item1">hello</li> <li class="item item2">world</li> <li class="item item3">foo</li> <li class="item item4">bar</li> </ul> </li> <li class="item item2">world</li> <li class="item item3">foo</li> <li class="item item4">bar</li> </ul> </div> </div>Edit: based on your updated question, you can use as others already pointed out whitespace:nowrap
.wrap { width: 100px; } .container { width: 100%; background: #ccc; } .item { position: relative; } .sub { background: #eee; position: absolute; left: 100px; top: 0; white-space:nowrap } .sub li { display: inline-block; border-left: 1px solid black; padding: 0 10px; } .sub li:first-child { padding: 0 10px 0 0; border-left: 0; }<h4>Example1. This is what I want. But, without setting width to .sub</h4> <div class="wrap"> <div class="container"> <ul> <li class="item item1"> <a href="">hello</a> <ul class="sub"> <li class="item item1">hello world</li> <li class="item item2">world hello</li> <li class="item item3">foo</li> <li class="item item4">bar</li> </ul> </li> <li class="item item2">world</li> <li class="item item3">foo</li> <li class="item item4">bar</li> </ul> </div> </div>
更多推荐
发布评论