Question

我很难找到合适的关键字来解决这个问题。

这是我的代码：

HTML

 <div class="windowTopBar">
   <span style="display: inline-block;"><b>System Properties</b></span>
   <span style="float: right;">[?][X]</span>
 </div>

CSS

 .windowTopBar {
   background: linear-gradient(90deg, #000080, #1084D0);
   color: white;
   height: 2em;
   min-height: 2em;
   align-items: center;
   margin: 0;
 }

这适用于“系统属性”＃34;在左边和＆＃34;什么是两个img按钮＆＃34;在右边。

如果我将span样式放入类中，它将停止工作。为什么呢？

如果我把＆＃34;显示：flex;＆＃34;进入父div，它也停止工作？为什么？我真的想使用display flex。实际上我已经在这很长时间内弄乱了这件事。

到目前为止，我最喜欢的解决方案是显示：flex和justify-content：在父级上使用flex-end（同时使用两个子div而不是spans），但我无法弄清楚如何浮动＆＃34;系统属性＆＃34;到了左边。

我正在努力使其具有响应性，所以如果有人能帮助我理解最佳实践是什么并且能够帮助我理解为什么span样式属性在html中工作而不是作为css类，我将不胜感激。

要清楚，如果我这样做：

HTML

 <span class="test1">blah1</span>
 <span class="test1">blah2</span>

CSS

 .test1 {
   display: inline-block;
 }
 .test2 {
   float: right;
 }

它不起作用。请帮忙！ :)如果我问得太多，请原谅我。这是我的第一个问题，但我已经潜伏了多年。

Answer 1

我会使用justify-content: space-between：

＆＃13;

.windowTopBar {
  display: flex;
  justify-content: space-between;
}

＆＃13;

 <div class="windowTopBar">
   <span><b>System Properties</b></span>
   <span>[?][X]</span>
 </div>

＆＃13;

使用flexbox时，在标题中左右对齐内容的最佳方法是什么？

1 个答案: