宽度：计算（自动+ 50px）；不起作用

Question

是否可以选择使 a#search_inner与其中最宽的元素一样宽 + 50px ？宽度：计算（自动+ 50px）；似乎不起作用。我需要宽度为auto，而不是100%。

纯 CSS 解决方案会更好。

简化的代码示例：

<div id="search_outter"> <!-- search window -->
  <div id="search_nav" style="float:left"> <!-- search navbar -->
    ...
  </div>

  <div id="search_inner" style="float:right"> <!-- actual search results -->
    ...
  </div>
</div>

Answer 1

您可以使用选择器并在您有一些内容时#search_inner:not(:empty)添加。所以它将是+ --> 示例padding-right:50px;#search_innerwide as content (auto)50px padding

#search_inner:not(:empty){
  padding-right:50px;
  height:20px;
  background:red;
  width:auto;
}

第一个片段-无内容

#search_inner:not(:empty){
  padding-right:50px;
  height:20px;
  background:red;
  width:auto;
}

#search_inner:not(:empty) {
  padding-right: 50px;
  height: 20px;
  background: red;
  width: auto;
}

第二个片段-一些随机内容

<div id="search_outter">
  <!-- search window -->
  <div id="search_nav" style="float:left">
    <!-- search navbar -->
    Nav bar
  </div>

  <div id="search_inner" style="float:right"></div>
</div>

#search_inner:not(:empty) {
  padding-right: 50px;
  height: 20px;
  background: red;
  width: auto;
}