css - 根据里面的内容调整绝对定位元素的宽度

Question

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

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

切换显示 div( )，位于andcontent下方。container-rightcontainer

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

在示例中，我有一个列表。

我希望它ul/li是水平的，并在必要时低于容器（红色）。

我不希望content获得（红色）的所有宽度container，而只是根据内部元素从右到左进行调整；

所以，有第一第二第三内联。

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

标签： csscss-position

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>