Question

首先抱歉我的英语，我知道这很糟糕，但我真的很想。

我有一个标题，我想在左侧放置“标题”，在右侧放置一个带有文字的符号。

我想让整个事情变得“更短”，看起来有很多div，但是当我以不同的方式做这件事时，它对我来说不起作用。 “123”应该在符号“navbutton”旁边。

HTML

<div>
      <div class=fl>
        <span class=apptitle>JustFaq.it</span>
      </div>
      <div class=tar>
        <span id=loadtime>123</span>
        <span class=navbutton>&#9776;</span>
      </div>
    </div>

CSS

.fl {
  float: left
}

.tar {
  text-align: right
}

.apptitle {
  margin-left: 5%
}

.navbutton {
  margin-right: .5%;
  cursor: pointer;
  float: right
}

https://jsfiddle.net/qyo6gwv5/3/

Answer 1

是的，使用flexbox：

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

https://jsfiddle.net/2qfzsf6t/1/

Answer 2

我的建议是：

.fl {
  display: inline-block;
}
.tar {
  float: right;
}

<div class="head1">
      <div class="fl">
        <span class="apptitle">JustFaq.it</span>
      </div>
      <div class="tar">
        <span id="loadtime">Text</span>
        <span class="navbutton">&#9776;</span>
      </div>
</div>

注意HTML属性的引号。您缺少类和ID周围的引号。

请考虑将<div class=head1>替换为HTML5的<header>元素。确定你可能想在这里删除或不必要的标签，并将其简化为：

<header>
  <h1 class="apptitle">JustFaq.it</h1>
  <span class="navbutton">&#9776;</span>
</header>

Answer 3

我会简化html和CSS

header {
  display: flex;
  justify-content: space-between;
}

<header>
  <span>JustFaq.it</span>
  <span>&#9776;</span>
</header>

即使是自以为是，我也承认我立刻被卖到了制作裸骨布局的想法，同时试图保持平稳，具有良好的氛围。
我冒昧地玩，并进一步推动它。希望你不介意：

body {
  overflow-x: hidden;
  margin: 0;
  font-family: sans-serif;
}
header {
  display: flex;
  justify-content: space-between;
}
header > * {
  padding: 8px;
}
nav {
  position: relative;
  cursor: pointer;
}
nav toggle {
  min-width: 2rem;
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s linear;
}
nav:hover toggle {
  background-color: #444;
  color: white;
}
nav .subnav {
  position: absolute;
  background-color: #444;
  color: white;
  top: 100%;
  right: 0;
  transform: translateX(100%);
  transition:  transform .3s cubic-bezier(.4,0,.2,1);
}
.subnav > * {
  text-align: center;
  min-width: 150px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: background-color .2s linear;
}
.subnav > *:hover {
  background-color: #3c3c3c;
}

nav:hover .subnav {
  transform: translateX(0);
}

<header>
  <span>JustFaq.it</span>
  <nav>
    <toggle>&#9776;</toggle>
    <div class="subnav">
      <div>option 1</div>
      <div>option 2</div>
      <div>option 3</div>
      <div>option 4</div>
    </div>
  </nav>
</header>

是否有一种更短的方式来左右对齐文本然后我做了？

3 个答案: