Question

我有一个颜色框和一些文本。我正在尝试将文本框恰好对齐。我在尝试正确对齐时遇到问题。

我尝试查看堆栈溢出时的其他帖子，并尝试使用float属性，但是由于使用float属性时文本向右偏移太远，因此无法正确对齐它们。如果有人要运行代码，则这是jsfiddle链接：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>

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

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对象

2 个答案: