Question

我最近刚进入html和css，并且有点坚持这个。我在登录框上工作，我无法让登录框和提交按钮完全一致。

唯一可行的方法是，如果我在这样的一行上写下它们，那么它们（水平地）完全对齐但我无法改变它们之间的空间：

首次尝试（在＆lt;之后没有Dot的代码）：＆lt; .input type =“text”id =“username”＆gt; submit

然后我以其他方式解决了这个问题。它由我的html文件中的输入类型文本和输入类型提交组成。

在我的CSS文件中，我首先调用了所有登录输入都被命名的类（登录部分的.logsec），然后我的输入类型文本和输入类型的id提交。

Class被称为logsec（对于Login部分），我的输入类型submit被称为id = Button，我的输入类型文本被称为id = subinput。

HTML CODE：

<html lang="en">

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/font.css">



<head>
    <meta charset="utf-8">
    <title>Main</title>

</head>

<body>
    <div class="container">
        <div class="brandname">
            <h1 <id="title" class=""><span id="logo">Test</h1>
        </div>
        <div class="logsec">
            <div class="box-header">
                <p> login</p>
        </div>

            <input type="submit" id="button" value="submit" style="float:right"/>
            <input type="text" id="subinput" style="width:100%;"/> 
        <a href="#"><p class="recover">Recover Password</p></a>     
            <h3> <a href=".../css/style.css"> <p class="signup">signup</a> </h3> 
                   <footer> <p Class="footer">LOGIN</p></footer>   
        </div>                              
</body>                            


</html>

CSS代码：

body {

  background-color: grey;

  font-size: 30px;

  text-align: center;
}



.brandname {

  margin-top: 300px;
}

.recover {

    font-size: 15px;

    text-align: center;
}

.signup {

    font-size: 15px;

    text-align: center;
}



/*///////////////////// LOGIN BUTTON ///////////////////////////////////////*/

.logsec [id=button] {

  vertical-align: top;

如果有人可以帮助我，我真的很喜欢。我很可怕但我希望有人可以帮助我。

谢谢大家。

Answer 1

您的代码中存在一些错误，其中一个“.logsec [id = button]”正在停止按钮排队。我删除了浮动并改为使用内联块。谷歌，我相信W3C有一些教程。无论如何，这是工作代码：

<强> CSS

body {

    background-color: grey;

      font-size: 30px;

      text-align: center;
    }



    .brandname {

      margin-top: 300px;
    }

    .recover {

    font-size: 15px;

    text-align: center;
}

.signup {

    font-size: 15px;

    text-align: center;
}


#subinput {
  display: inline-block;
}

<强> HTML

<div class="container">
    <div class="brandname">
    <h1 id="title"><span id="logo">Test</span></h1>
    </div>
    <div class="logsec">
        <div class="box-header">
            <p> login</p>
    </div>


        <input type="text" id="subinput"/> 
        <input type="submit" id="button" value="submit"/>
    <a href="#"><p class="recover">Recover Password</p></a>     
        <h3> <a href=""> <p class="signup">signup</a> </h3> 
               <footer> <p Class="footer">LOGIN</p></footer>   
    </div>

这里有一个小提琴（我希望，不知道代码保存了多长时间） FIDDLE

对齐输入框（名称）和提交按钮

1 个答案: