根据内部内容调整绝对定位元素的宽度

Question

我有一个 div(container-right) 绝对位于右侧；

里面我有一个使用复选框的切换（显示隐藏）；单击文本 - Tomandji。

切换显示 div(content)，位于 container-right 和 container 下方。

我需要绝对定位div(content)，宽度根据里面的内容调整；我需要这个，因为内容是动态的。

在示例中我有一个列表。

我希望 ul/li 水平并根据需要低于容器（红色）。

我不希望content得到container（红色）的所有宽度，而是根据里面的元素从右到左调整；

因此，要内联 First Second Third。

.toggle .trigger {
  cursor: pointer; }

.toggle input[type='checkbox'].trigger {
  display: none; }

.toggle .content {
  display: none; }

.toggle .trigger:checked ~ .content {
  display: block; }

.container { 
  height:120px;
  position: relative;
  background-color:red;
}

.container-right {
  background: #0069aa;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0; }
  
  .container-right .toggle {
    padding: 0 1rem;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%); 
 }
    .container-right .toggle .trigger {
      color: #fff;}

      .container-right .toggle .trigger * {
        display: block; }
        
      .container-right .toggle .trigger::after {
        content: "a";
    }
      .container-right .toggle .trigger:checked ~ label {
        color: #4FA738; }
        
      .container-right .toggle .trigger:checked::after {
        content: "x"; }
        
    .container-right .toggle .content {
      background: #0069aa;
      position: absolute;
      right: 0;
      display:none;
      top: 71.5px; }
      
      .container-right .toggle .content ul li {
        display: inline-block; }
        
        ul {
        padding:0
        }

<div class="container">
 <div class="container-right">
        <div class="toggle">
            <input type="checkbox" id="menu-toggle"  class="trigger"/>
            <label for="menu-toggle" class="trigger">
                <span>Tomandji</span>
            </label>
    <div class="content">
    <ul>
        <li class="c-list__item"><a href="#">First link</a></li>
        <li class="c-list__item"><a href="#">Second link</a></li>
        <li class="c-list__item"><a href="#">Third link</a></li>
    </ul>
    </div>
</div>
</div>

Answer 1

如@CBroe 所述，您可以将 white-space:nowrap 添加到 .content。下面是一个工作示例。

.toggle .trigger {
  cursor: pointer; }

.toggle input[type='checkbox'].trigger {
  display: none; }

.toggle .content {
  display: none; }

.toggle .trigger:checked ~ .content {
  display: block; }

.container { 
  height:120px;
  position: relative;
  background-color:red;
}

.container-right {
  background: #0069aa;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0; }
  
  .container-right .toggle {
    padding: 0 1rem;
    position: relative;
    text-align: center;
    top: 50%;
    transform: translateY(-50%); 
 }
    .container-right .toggle .trigger {
      color: #fff;}

      .container-right .toggle .trigger * {
        display: block; }
        
      .container-right .toggle .trigger::after {
        content: "a";
    }
      .container-right .toggle .trigger:checked ~ label {
        color: #4FA738; }
        
      .container-right .toggle .trigger:checked::after {
        content: "x"; }
        
    .container-right .toggle .content {
      background: #0069aa;
      position: absolute;
      right: 0;
      display:none;
      top: 71.5px;
      /* ###### Add this ###### */
      white-space: nowrap;
      }
      
      .container-right .toggle .content ul li {
        display: inline-block; }
        
        ul {
        padding:0
        }

<div class="container">
 <div class="container-right">
        <div class="toggle">
            <input type="checkbox" id="menu-toggle"  class="trigger"/>
            <label for="menu-toggle" class="trigger">
                <span>Tomandji</span>
            </label>
    <div class="content">
    <ul>
        <li class="c-list__item"><a href="#">First link</a></li>
        <li class="c-list__item"><a href="#">Second link</a></li>
        <li class="c-list__item"><a href="#">Third link</a></li>
    </ul>
    </div>
</div>
</div>

根据内部内容调整绝对定位元素的宽度

Adjust the width of an absolute positioned element, based on the content inside

css

css-position