可以在此设置宽度为自动？

Question

第一个例子展示了我想要实现的目标。 但是，我无法将宽度设置为.sub，因为.sub可能会添加新项目。因此宽度应相应增加。

但是，如果没有设置宽度，结果如示例2所示。

在保持水平布局的同时让.sub项增长的任何方法？

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以添加：

.sub {
  white-space:nowrap;
}

这将强制内容保持内联并忽略父级的宽度。

.wrap,
.wrap2 {
  width: 100px;
}
.container {
  width: 100%;
  background: #ccc;
}
.item {
  position: relative;
}
.sub {
  background: #eee;
  position: absolute;
  left: 100px;
  top: 0;
  width: 300px;
  white-space: nowrap;
}
.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>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</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>

Answer 2

您可以在display:flex

中设置.sub

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

修改：根据您更新的问题，您可以像其他已经指出的那样使用whitespace:nowrap

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

只需将white-space: nowrap添加到.sub。

即可

.wrap, .wrap2 {
  width: 100px;
}

.container {
  width:100%;
  background: #ccc;
}

.item {
  position:relative;
}

.sub {
  background: #eee;
  position: absolute;
  left:100px;
  top:0;
  width: 300px;
}
.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;
  white-space:nowrap;
}

<h4>Example2. This is what happens when no width is set to .sub</h4>
<h4>and white-space:nowrap is added</h4>
<div class="wrap2">
  <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>