Question

我正在处理注册表单，当我想在同一行输入[“text”]（年份）和选择项目（日期和月份）时，我遇到了问题，这就是我得到的： registration form 我想通过在顶部添加边距来删除select标签底部的边距（默认添加），所以我添加了这个：

input[type="email"],
input[type="password"],
input[type="text"],
select {
  display: block;
  width: 80%;
  height: 30px;
  text-align: center;
  border: none;
  font-size: 1em;
  color: #313A3D;
  background-color: #E8E9EA;
  margin-top: 10px;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="./css/styleAuth.css" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <header>
    <div class="navbartop">
      <!--<a class="title" href="./auth.html" >title of the template</a>-->
      <a class="item selected" href="#auth">Authentification</a>
      <a class="item" href="#register">register</a>
      <a class="item" href="#newsleter">newsleter</a>
      <a class="item" href="#comments">Comments</a>
    </div>
  </header>
  <section class="secondSection">
    <div class="registerPanel">
      <div class="row topbuffer">
        <div class="col-md-6"><input type="text" name="fn" placeholder="first name" /> </div>
        <div class="col-md-6"><input type="text" name="ln" placeholder="last name" /></div>
      </div>
      <div class="row topBuffer">
        <div class="col-md-4">
          <select>
            <option selected="">day</option>
            <option>1...31</option>
          </select>
        </div>
        <div class="col-md-4">
          <select>
            <option>month</option>
            <option>1...12</option>
          </select>
        </div>
        <div class="col-md-4">
          <input type="text" name="y" placeholder="year" />
        </div>
      </div>
      <div class="row topBuffer">
        <div class="col-md-12"><input type="email" name="email" placeholder="email" /></div>
      </div>
      <div class="row topBuffer">
        <div class="col-md-6"><input type="password" name="pw1" placeholder="enter your password" /></div>
        <div class="col-md-6"><input type="password" name="pw2" placeholder="comfirm your password" /></div>
      </div>
    </div>
  </section>

</body>

</html>

...但它仍然不起作用，顶部的边距没有影响，所以任何人都可以帮助我，伙计们！提前谢谢

Answer 1

<强>更新：

我不知道我是否理解得很好，但你想要的是删除两个选择的底边？如果是的话，这里是必要的css：

首先，您需要在日期和月份中添加class，如下所示：

<强> HTML ：

    <div class="col-md-4">
         <select class="margin-bottom-0">
               <option selected="" >day</option>
               <option>1...31</option>
         </select>
    </div>
    <div class="col-md-4">
        <select class="margin-bottom-0">
             <option>month</option>
             <option>1...12</option>
        </select>
    </div>
    <div class="col-md-4">
         <input type="text" name="y" placeholder="year"/> 
    </div>

之后你需要在css中声明这个类：

<强> CSS ：

.margin-bottom-0{
    margin-bottom: 0;
}

我希望它可以帮到你

问候！

Answer 2

试试这个。无需编写任何CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Test Code</title>

    <!-- Bootstrap -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " crossorigin="anonymous ">
    <style>
        input[type="email"],
        input[type="password"],
        input[type="text"],
        select {
            /* display : block;
   width : 80%;
   height : 30px;
   text-align : center;
   border : none;
   font-size : 1em;
   color: #313A3D;
   background-color: #E8E9EA;
   margin-top : 10px; */
        }
    </style>
</head>

<body>
    <header>
        <div class="navbartop">
            <!--<a class="title" href="./auth.html" >title of the template</a>-->
            <a class="item selected" href="#auth">Authentification</a>
            <a class="item" href="#register">register</a>
            <a class="item" href="#newsleter">newsleter</a>
            <a class="item" href="#comments">Comments</a>
        </div>
    </header>
    <section class="secondSection">
        <div class="registerPanel">
            <div class="row topbuffer form-group">
                <div class="col-md-6">
                    <input type="text" name="fn" placeholder="first name" / class="form-control"> </div>
                <div class="col-md-6">
                    <input type="text" name="ln" placeholder="last name" / class="form-control">
                </div>
            </div>
            <div class="row topBuffer form-group">
                <div class="col-md-4">
                    <select class="form-control">
                        <option selected="">day</option>
                        <option>1...31</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <select class="form-control">
                        <option>month</option>
                        <option>1...12</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <input type="text" name="y" placeholder="year" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <input type="email" name="email" placeholder="email" / class="form-control">
            </div>
            <div class="row form-group">
                <div class="col-md-6">
                    <input type="password" name="pw1" placeholder="enter your password" / class="form-control">
                </div>
                <div class="col-md-6">
                    <input type="password" name="pw2" placeholder="comfirm your password" / class="form-control">
                </div>
            </div>
        </div>
    </section>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

</html>

选择保证金不起作用

2 个答案: