并排对齐两个 HTML 个对象

Question

我有一个彩盒和一些文字。我正在尝试将框恰好对齐到文本的左侧。我在尝试正确对齐时遇到问题。

我尝试查看有关堆栈溢出的其他帖子并尝试使用浮动属性但无法正确对齐它们，因为使用浮动 [=23= 时文本太靠右了].这是 jsfiddle link 如果有人想要运行代码：https://jsfiddle.net/1qgep5tn/4/

<!DOCTYPE html>

<html>
<head>

<style>

  .box {
    width: 20px;
    height: 20px;
   }

  .boxColor {
      background: #1c5a7d;
  }

    #right{
      float: right;
    }

    #left{
      float: left;
    } 

</style>

</head>
<body>

<div class="box boxColor" ></div>       
   Header:
     <br>
          <input type="text" name="firstname"  value="">
     <br>

</body>
</html>

我希望框在文本左侧对齐，但它出现在文本上方。这是它现在的样子：

Answer 1

除非经过编辑，否则 JSFiddle 看起来与您拥有的不同。将标题 <div> 更改为 <p> 并确保它位于方框旁边，如下所示：

<div class="google_map">
    <div class="box blueish"></div>
    <p class="paragraph">Header:</p>
  </div>

并在类 paragraph 和 box 中使用 display: inline-block。

Answer 2

这样 HTML 您将很难根据需要对齐项目。这是因为没有包含所有文本内容的主容器。我首先建议将您的文本内容包装在另一个容器中，并为输入使用标签，例如：

<div class="box boxColor"></div>
<div class="box boxText">
    <label for="firstname">
        <span>Header</span>
        <input type="text" name="firstname" id="firstname"
                value="">
    </label>
 </div>

使用该结构，您可以更好地应用样式：

body {
    display: flex;
    flex-direction: row;
}
label > span {
    display: block
}
label > span::after {
    content: ":";
}
.box {
    /* whatever shared styles you might want... */
}
.boxColor {
    background-color: #1c5a7d;
    height: 20px;
    width: 20px;
}
.boxText {
    flex-grow: 1
}

并排对齐两个 HTML 个对象

Aligning two HTML objects side by side

html

css

web-frontend