标签与其他输入或标签不对齐

Question

这里是新手。我正在尝试创建一个简单的单页网站，但我的联系表名字标签没有附在正确的部分。

我附上了输入中没有带下划线的“名字”的图像，尽管我已将其添加到另一个部分和容器下。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Sitemize Hoşgeldiniz</title>
</head>

<body>
    <nav class="nav-bar">
        <ul class="nav-list">
            <li class="nav-items"><a href="#">Home</a></li>
            <li class="nav-items"><a href="#">Contact</a></li>
            <li class="nav-items"><a href="#">About</a></li>
        </ul>
    </nav>


    <section id="information">
        <div class="container">
            <div class="information-showcase">
                <h1 id="header"><span id="header-span">Sitemize</span> Hoşgeldiniz</h1>
            </div>
        </div>
    </section>

    <section id="short-info">
        <div class="container">
            <div class="container-image-1">
                <div class="row">
                    <div class="column">
                        <h2>Anında Sipariş</h2>
                        <i class="fas fa-shopping-cart fa-5x"></i>
                    </div>
                    <div class="column">
                        <h2>Hızlı Teslimat</h2>
                        <i class="fas fa-truck fa-5x"></i>
                    </div>
                    <div class="column">
                        <h2>Mmnuniyet Garantisi</h2>
                        <i class="fas fa-smile-beam fa-5x"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="contact-us">
        <div class="container">
            <form action="#">
                <label for="fname">First Name</label>
                <input type="text" id="fname" placeholder="Enter your first name">
                <label for="fname">Last Name</label>
                <input type="text" id="lname" placeholder="Enter your last name">
                <label for="subject">Subject</label>
                <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
            
                <input type="submit" value="Submit">
            </form>
        </div>
    </section>
</body>
<script src="app.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

</html>

/* Body */
body {
  background-color: burlywood;
}

/* Navigation Bar */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0A800C
  }

.nav-items {
    display: inline;
    float: left;
}

.nav-items a {
    text-decoration: none;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    font-family: Arial, Helvetica, sans-serif;
}

.nav-items a:hover {
    background-color: #111;
}

/* Image section */
.column {
    float: left;
    width: 25%;
    padding: 10px;
    margin-top: 25px;
    margin-left: 100px;
    background-color: aqua;
}

#information {
    background:url("resim2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    height: 400px;
}

#header {
  text-align: center;
  padding-top: 150px;
  color: aqua;
  font-size: 60px;
}

.lead {
  text-align: center;
}

/* Create three equal columns that floats next to each other */
.column {
  float: center;
  width: 20%;
  padding: 10px;
  height: 200px;
  text-align: center;
  background-color: burlywood;
}

.row {
  margin-left:150px;
}

谢谢奥努尔

Answer 1

问题是您使用的是

float

在你的 css 中造成了问题

如果你需要你的元素是水平的

将此添加到 .row

.row {
 margin-left: 150px;

 display:flex;
}

从您的 css

中删除此属性

.列

并用具有属性

的 div 包裹物品

display:flex;

您可以在此处了解更多信息

https://www.youtube.com/watch?v=fYq5PXgSsbE

祝你好运！

看看我是怎么做到的

https://stackblitz.com/edit/js-qjmbgj?file=index.html

https://js-qjmbgj.stackblitz.io

如果你不能使用 display flex

使用位置：绝对；

更多理解

到这里

https://www.khanacademy.org/computing/computer-programming/html-css/css-layout-properties/pt/css-position

标签与其他输入或标签不对齐

Label not aligning with other input or labels

html

css

label

input

css-selectors