html - 根据 CSS 中的标题可用性对齐元素

Question

我已经创建了一个面板，如下面的屏幕截图所示。我的面板将有一个标题标题和执行各种操作的不同图标。这些标题标题和图标都是可选的，换句话说，在许多情况下，其中任何一个都不可用。

1. 每当我有标题时，我希望我的所有图标都位于面板标题的最右侧，这与我编写的 CSS 的第一个屏幕截图一样工作正常。
2. 当我没有标题时，我希望我的所有图标都位于面板标题的最左侧，如第二个屏幕截图所示，我很难实现。

屏幕截图

HTML

   <div class="panel">
       <div class="panel-header ">Title Goes Here
           <div class="toolbar-button-group">
               <button class="toolbar-button-stroke icon-add"></button>
               <button class="toolbar-button-stroke icon-hide"></button>
               <button class="toolbar-button-stroke icon-edit"></button>
               <button class="toolbar-button-stroke icon-options"></button>
           </div>
       </div>
       <div class="panel-content "></div>
   </div>

CSS

  .panel {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    background: #fff;
    width: 100%;
    height: 100%;
  }
  .panel-header {
    color: #354052;
    text-transform: capitalize;
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding-left: 24px;
    border-bottom: 2px #BBBBBB solid;
  }
  .panel-content {
    padding: 24px;
    background: white;
  }
  .toolbar-button-stroke{    
      background:white;
      border: none;
      border-radius: 4px;
      padding: 6px;
      margin: 0px 3px;
      color:black;
      font-size: 15px;
      text-transform: uppercase;
      cursor:pointer;
      outline: none;
  } 
  .toolbar-button-group{
      float: right;
  }

我更喜欢没有定位的 CSS 解决方案。 fiddle 链接 here

提前致谢

Answer 1

如果您可以稍微更改您的 HTML 以添加一个额外的元素，您可以使用 :empty 来根据下一个同级选择器是否包含内容来定位它。

.panel {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
  background: #fff;
  width: 100%;
  height: 100%;
}
.panel-header {
  color: #354052;
  text-transform: capitalize;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding-left: 24px;
  border-bottom: 2px #BBBBBB solid;
}
.panel-content {
  padding: 24px;
  background: white;
}
.toolbar-button-stroke {
  background: white;
  border: none;
  border-radius: 4px;
  padding: 6px;
  margin: 0px 3px;
  color: black;
  font-size: 15px;
  text-transform: uppercase;
  cursor: pointer;
  outline: none;
}
.toolbar-button-group {
  float: right;
}

span:empty + .toolbar-button-group {
  float: left;
}

<div class="panel">
  <div class="panel-header "><span>Title Goes Here</span>
    <div class="toolbar-button-group">
      <button class="toolbar-button-stroke icon-add">A</button>
      <button class="toolbar-button-stroke icon-hide">B</button>
      <button class="toolbar-button-stroke icon-edit">C</button>
      <button class="toolbar-button-stroke icon-options">D</button>
    </div>
  </div>
  <div class="panel-content "></div>
</div>

<br/>

<div class="panel">
  <div class="panel-header "><span></span>
    <div class="toolbar-button-group">
      <button class="toolbar-button-stroke icon-add">A</button>
      <button class="toolbar-button-stroke icon-hide">B</button>
      <button class="toolbar-button-stroke icon-edit">C</button>
      <button class="toolbar-button-stroke icon-options">D</button>
    </div>
  </div>
  <div class="panel-content "></div>
</div>