html - 标签未与其他输入或标签对齐
问题描述
新手来了 我正在尝试创建一个简单的单页网站,但我的联系表格名字标签没有附上正确的部分。
我附上了带下划线的“名字”不在输入中的图像,即使我已将它添加到另一个部分和容器下。
<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;
}
谢谢奥努尔
解决方案
问题是你正在使用
float
在你的css中出现问题
如果你需要你的元素是horizantly
将此添加到 .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
使用位置:绝对;
为了更多的理解
到这里
推荐阅读
- ethereum - web3 发送数据和令牌
- jquery - 如果(垂直)滚动条在另一个 div 中可见,则向 div 添加填充
- javascript - 如何使用 GET 方法向 URL 添加警报提示以从 URL 获取数据
- javascript - javascript - replace() 删除字符串中所有重复的字母
- serial-port - 如何在扭曲的串行控制线上生成事件
- traffic - 如何让firefox通过mitmproxy连接网页?
- javascript - PhpStorm:YUI Compressor JS 不适用于打字稿
- python - 如何在 Python 中使用 praw 将保存的 reddit 帖子列表抓取到 txt 文件
- python - 如何获取“src=...”的 url?
- machine-learning - 当我们在 PyTorch 张量上调用 cpu().data.numpy() 时会发生什么?