时间戳

首页 > 解决方案 > 为什么输入标签和按钮标签没有放在一起并在单独的行中出现

html - 为什么输入标签和按钮标签没有放在一起并在单独的行中出现

问题描述

如图所示

这是我的 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}

这是问题描述：我正在设计的网页与我应该制作的网页不同（如附图所示）。主要问题是输入标签和搜索框不正确。

标签： htmlcss

解决方案

尝试这个

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

推荐阅读