gpt4 book ai didi

html - 为什么 input 标签和 button 标签没有放在一起而是分开一行

转载 作者:太空宇宙 更新时间:2023-11-04 05:44:54 28 4
gpt4 key购买 nike

as shown

这是我的 HTML 和 CSS 代码


<!DOCTYPE html>
<html>
<head>
<title>assignment1</title>
<meta charset="utf-8">
<meta name = "description" content="assignment">
<meta name = "keywords" content="php, assignment">
<meta name = "author" content="Kamal">
<meta name = "viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href= "css/assignment1.css">
</head>
<body>
<div class="container">
<div class="row">
<div class = "col-xs-12 col-xm-6">
<img class ="img1" src="images/logo.png">
</div>
<div class = "col-xs-12 col-xm-6">
<u class ="new"><p class ="new1"> Login to My Account</p></u>
</div>
</div>
<div class="row">
<div class = "col-xs-12 col-xm-12" >
<form class = "k1">
<input class = "new2" type="text" id="namef" placeholder="Search entire story here...." name="Search">
<button type = "submit" class = "new3"><img src="images/search.png"></button>
</form>
</div>
</div>
<div class="row">
<div class = "col-xs-12 col-xm-12">
<hr class = "new4">
</div>
</div>
</div>
</body>
</html>

CSS 代码:

body{background-color: #d7e7f4}
div.container{width:954px; background-color: #FFFFFF}
img.img1{margin-top: 25px; margin-left: 22px}
u.new{color:#007BAF}
p.new1{color:#007BAF; margin-top:-50px; margin-right:22px; margin-left:790px; font-size:14px}
form.k1{margin-top:-15px; margin-left:705px; margin-right:22px}
input.new2{ padding: 2px; font-size: 13px; border: 1px solid #007BAF; width: 64%;}
button.new3{border: none; background-color:#FFFFFF }
hr.new4{margin-top:100px; margin-bottom:1000px; border-top:4px solid black; border-radius:50px; width:954px}

这是问题描述:我正在设计的网页与我应该制作的网页不一样(如附图所示)。主要问题是输入标签和搜索框无法正常显示。

最佳答案

试试这个

<div class="row">
<div class = "col-xs-12 col-xm-12" >
<form>
<div class="form-row">
<div class="col-auto">
<input class = "new2" type="text" id="namef" placeholder="Search entire story here...." name="Search">
</div>

<div class="col-auto">
<button type = "submit" class = "new3"><img src="images/search.png"/>
</div>
</div>
</form>
</div>
</div>

关于html - 为什么 input 标签和 button 标签没有放在一起而是分开一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58796822/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com