时间戳

首页 > 解决方案 > 如何将两个输入文本字段移动到同一行？

html - 如何将两个输入文本字段移动到同一行？

问题描述

我正在设计我的第一个网站，并且正在尝试制作一个人们可以填写表格的标签。我有两个名字和姓氏的输入字段，但它们位于不同的行上。

表格现在的照片

我想将它们并排移动到上面的行，在灰色框旁边。基本上我想让所有东西都在同一条线上。下面是 HTML 和 CSS：

.Contact-Us h1 {
  text-align: center;
  padding-bottom: 20px;
  padding-top: 10px;
}

#Start-registration {
  display: flex;
  border: 1px solid grey;
  background-color: #DCDCDC;
  margin-left: 30px;
  width: 170px;
}

.First-name input[type='text'] {
  font-size: 16px;
  height: 34px;
  width: 35%;
}

.Last-name input[type='text'] {
  font-size: 16px;
  height: 34px;
  width: 35%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<article class="Contact-Us">
  <h1> Contact Us </h1>
  <p class="Subtitle-Info"> Contact us via sending a message </p>
  <p id="Start-registration"> First and last name </p>
  <form action="" method="get" class="First-name">
    <label for='First_name'></label>
    <input id='First_name' name='First_name' type='text' placeholder="First Name" />
  </form>
  <form action="" method="get" class="Last-name">
    <label for='Last_name'></label>
    <input id='Last_name' name='Last_name' type='text' placeholder="Last Name" />
  </form>
</article>

标签： htmlcss

解决方案

你应该只有一个这样的表格..

.Contact-Us h1 {
   text-align: center;
   padding-bottom: 20px;
   padding-top: 10px;
 }

 #Start-registration  {
   display: flex;
   border: 1px solid grey;
   background-color: #DCDCDC;
   margin-left: 30px;
   width: 170px;
 }

 .First-name input[type='text'] {
   font-size: 16px;
   height: 34px;
   width: 35%;
 }

 .Last-name input[type='text'] {
   font-size: 16px;
   height: 34px;
   width: 35%;
 }
<!DOCTYPE html>
      <html lang='en'>
        <head>
          <meta charset='UTF-8'/>
          <title>SerFin</title>
          <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
          <link href='../test.css' rel='stylesheet'/>
          <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
          <script>
            $(document).ready(function(){
            $('.dropdown').hover(function(){
                $('.dropdown-menu', this).stop(true, true).slideDown(0);
                $(this).addClass('open');
            },
            function(){
                $('.dropdown-menu', this).stop(true, true).slideUp(0);
                $(this).removeClass('open');
            });
            });
          </script>
        </head>
        <body>
          <header>
            <nav>
              <ul class="menu">
                <li><a href="../SerFin.html">Home</a></li>
                <li><a href='Customer-service.html'>Customer Service</a></li>
                <li><a href="Info.html">About us</a><li>
                <li><a href='#'>Submission</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" href="#">Search Engine <b class="caret"></b><a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Universities</a></li>
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">Courses</a></li>
                        <li><a href="#">Internships</a></li>
                        <li><a href="#">Services</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="setup">
                <li><a href='#'>Login</a></li>
                <li><a href="#">Sign up</a></li>
            </ul>
         </nav>
       </header>
       <article class="Contact-Us">
         <h1> Contact Us </h1>
         <p class="Subtitle-Info"> Contact us via sending a message </p>
         <p id="Start-registration"> First and last name </p>
         <form action="" method="get" class="First-name">
           <label for='First_name'></label>
           <input id='First_name' name='First_name' type='text' placeholder="First Name"/>
           <label for='Last_name'></label>
           <input id='Last_name' name='Last_name' type='text' placeholder="Last Name"/>
         </form>
       </article>
       </body>
     </html>

推荐阅读