Question

我正在尝试创建像facebook这样的登录页面。但登录表单没有进入父div（标题）。我减小了h1元素的宽度，但它不起作用。

那么我应该怎么做才能让标题和登录表格并排存在。

以下是我的代码。

.header {
background: #3B5998;
height: 90px;
}

.header h1 {
color: white;
padding-top: 20px;
padding-left: 20px;
width: 40%; 
}

.log {
background: pink;
float: right;
margin-bottom: 100px;
width: 40%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login Page</title>
  <link rel="stylesheet" href="style.css" media="all">
</head>

<body>
<div class="header">
    <h1>ChatBook</h1>

    <div class="log">
        <form action="#" method="POST">
            <input type="email" placeholder="Email">
            <input type="password" placeholder="Password">
            <button type="submit">Login</button>
        </form>
    </div>
</div>

Answer 1

您可以使用 Flexbox 执行此操作：

＆＃13;

body {margin: 0}

.header {
  display: flex; /* displays flex-items (children) inline */
  justify-content: space-around; /* horizontal alignment / also experiment with other values such as: "space-between", "space-evenly", "center" ... */
  align-items: center; /* centers them vertically */
  background: #3B5998;
  height: 90px;
}

.header > h1 {
  color: #fff;
}

＆＃13;

<div class="header">
  <h1>ChatBook</h1>
  <div class="log">
    <form action="#" method="POST">
      <input type="email" placeholder="Email">
      <input type="password" placeholder="Password">
      <button type="submit">Login</button>
    </form>
  </div>
</div>

＆＃13;

Answer 2

只需使用这样的flex：

.header {
  background: #3B5998;
  height: 90px;
  display:flex;
  align-items:center;
}

.header h1 {
  color: white;
  flex:1;
  text-align:center;
}

.log {
  background: pink;
}

<div class="header">
    <h1>ChatBook</h1>

    <div class="log">
      <form action="#" method="POST">
        <input type="email" placeholder="Email">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
      </form>
    </div>
  </div>

Answer 3

表单不适合的问题是因为<h1>元素没有浮动，虽然设置为width: 40%，但它不允许其他元素浮动它。

您所要做的就是将float: left;添加到<h1>元素中，您就可以了。

Answer 4

为了达到预期的效果，除了flexbox使用diplay：table to parent elment和display：table-cell with vertical-align：middle on child elements to vertical center。

.header {
background: #3B5998;
height: 90px;
display:table;
  width:100%;
}

.header h1 {
color: white;
width: 50%; 
  display: table-cell;
 vertical-align: middle;
}

.log {
background: #3B5998;
width: 50%;
  display: table-cell;
   text-align: center;
   vertical-align: middle;
}

https://codepen.io/nagasai/pen/QOBPMW

选项2：
使用CSS变换到垂直中心元素，通过将translateY设置为50％，将元素垂直居中并使H1元素显示：内联块使两个元素在一行中水平对齐

.header h1 {
  color: white;
  padding-left: 20px;
  width: 40%;
  display:inline-block;
}

.log {
  background: pink;
  float: right;
  width: 40%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

https://codepen.io/nagasai/pen/ZajZRL

Answer 5

＆＃13;

.header {
  width: 100%;
  background: skyblue;
  overflow: hidden;
}
.header .title {
  float:left;
}
.header .log {
  float:right;
  margin: 20px;
}
.header .log input{
  display:block;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login Page</title>
  <link rel="stylesheet" href="style.css" media="all">
</head>

<body>
<div class="header">
    <div class="title">
      <h1>ChatBook</h1>
    </div>
    <div class="log">
        <form action="#" method="POST">
            <input type="email" placeholder="Email">
            <input type="password" placeholder="Password">
            <button type="submit">Login</button>
        </form>
    </div>
</div>

＆＃13;

Answer 6

试试这个：

.header {
  background: #3B5998;
  height: 90px;
  display:table;
  width:100%
}

因为漂浮它会出来

div不与另一个div居中

6 个答案: