Question

我的div（container-right)绝对位于右侧；

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

此开关在content和container-right下方显示一个div（container）。

我需要绝对位置的div（content），宽度要根据里面的内容进行调整；我需要这个，因为内容是动态的。

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

我希望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>

Answer 1

如@CBroe所述，您可以将public static void Main() { Example test = new Example("value"); Example.Replace(ref test, "newValue"); Console.WriteLine(test.SomeProperty); // prints "newValue" }添加到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
        }

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

1 个答案: