可以在此设置宽度为自动？(Possible to set width as auto in this?)

编程入门行业动态更新时间:2024-10-26 19:31:03

第一个例子展示了我想要实现的目标。但是，我无法将宽度设置为.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>