Question

我正在尝试制作网页的登录视图，该登录视图有两种形式（一种用于注册，另一种用于登录），我想将它们对齐并放在同一行。

起初，我尝试使用一个表来实现此目的，但这是不成功的，因此我使用了一些引导表单组（行和列），但我也没有成功，最后我设法将使用float属性将它们放在同一行中，但是我得到的结果还不够好。

<!-- THIS IS MY HTML -->

    <header>
        <a href="Index.html"><img src="rsc/logo.png" class="center"></a>

        <div class="navbar1">
            <a href="#inicio">Inicio</a>
            <a href="#nuevasAdiciones">Nuevas Adiciones</a>
            <div class="dropdown1">
                <button class="dropbtn">Categoría 
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown1-content">
                    <a href="#">Punk</a>
                    <a href="#">Rock</a>
                    <a href="#">Emo</a>
                </div>
            </div> 
            <div class="dropdown1">
                <button class="dropbtn">Tipo de Material
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown1-content">
                    <a href="#">Vinilos</a>
                    <a href="#">Discos Compactos</a>
                    <a href="#">Casetes</a>
                </div>
            </div> 
            <div class="inlogin">
                    <a href="#login">Iniciar Sesión <i class="fa fa-sign-in"></i></a>
            </div>
        </div>
    </header>

    <form class="bord" style="float: left;">
        <legend>Crear Cuenta</legend>
        <div class="form-group">
            <label for="formGroupExampleInput">Example label</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput2">Another label</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
        </div>
    </form>

    <form class="bord" style="float: right;">
        <legend>Registrarse</legend>
        <div class="form-group">
            <label for="formGroupExampleInput">Example label</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput2">Another label</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
        </div>
    </form>

    <footer style="text-align: center;">
        <p><strong>Contacto</strong></p>
        <p>Email: <a href="mailto:pedidos@vinilos.pe">pedidos@vinilos.pe</a></p>
        <p>Teléfono: 3291177</p>
        <p><a href="https://www.facebook.com/vinilos.pe/" target="_blank"><i class="fa fa-facebook-square" style="font-size:40px;color: #3b5998;"></i></a></p>
        <p>Vinilos.Pe &copy; 2019 Derechos Reservados</p>
    </footer>


/* THIS IS MY CSS */

.bord { 
    display: block;
    margin-top: 15px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-style: solid;
    border-width: 2.5px;
    text-align: center;
  }

我试图获得此mockup的外观，但出于某种原因，却出现了页脚，看起来像this。

Answer 1

您尚未将页脚的显示添加到none。

将CSS更新为此：

.bord { 
    display: block;
    margin-top: 15px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-style: solid;
    border-width: 2.5px;
    text-align: center;
  }
  footer{;
    display:inline-block;
    width:100%;
  }

这里是fiddle。

Answer 2

您可以尝试一下。希望这会有所帮助。

*{
	margin: 0px;
	padding: 0px;
}
.form{
	width: 100%;
	margin: 0 auto;
}
.bord { 
    display: inline-block;
    margin-top: 15px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-style: solid;
    border-width: 2.5px;
    text-align: center;
    width: 45%;
  }
  footer{;
    display:inline-block;
    width:100%;
  }

    <header>
        <a href="Index.html"><img src="rsc/logo.png" class="center"></a>

        <div class="navbar1">
            <a href="#inicio">Inicio</a>
            <a href="#nuevasAdiciones">Nuevas Adiciones</a>
            <div class="dropdown1">
                <button class="dropbtn">Categoría 
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown1-content">
                    <a href="#">Punk</a>
                    <a href="#">Rock</a>
                    <a href="#">Emo</a>
                </div>
            </div> 
            <div class="dropdown1">
                <button class="dropbtn">Tipo de Material
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown1-content">
                    <a href="#">Vinilos</a>
                    <a href="#">Discos Compactos</a>
                    <a href="#">Casetes</a>
                </div>
            </div> 
            <div class="inlogin">
                    <a href="#login">Iniciar Sesión <i class="fa fa-sign-in"></i></a>
            </div>
        </div>
    </header>

<div class="form">
    <form class="bord" style="">
        <legend>Crear Cuenta</legend>
        <div class="form-group">
            <label for="formGroupExampleInput">Example label</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput2">Another label</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
        </div>
    </form>

    <form class="bord" style="">
        <legend>Registrarse</legend>
        <div class="form-group">
            <label for="formGroupExampleInput">Example label</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput2">Another label</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
        </div>
    </form>
</div>
    <footer style="text-align: center;">
        <p><strong>Contacto</strong></p>
        <p>Email: <a href="mailto:pedidos@vinilos.pe">pedidos@vinilos.pe</a></p>
        <p>Teléfono: 3291177</p>
        <p><a href="https://www.facebook.com/vinilos.pe/" target="_blank"><i class="fa fa-facebook-square" style="font-size:40px;color: #3b5998;"></i></a></p>
        <p>Vinilos.Pe &copy; 2019 Derechos Reservados</p>
    </footer>

Answer 3

您可以尝试以下方法：

您的HTML：

<div class="formWrapper">
    <form>First Form</form>
    <form>Second Form</form>
</div>

您的CSS：

.formWrapper{
    display: flex;
}

表单将是内联的...您只需要添加一些额外的样式来调整表单的大小和位置即可。

Answer 4

由于使用的是引导程序，因此可以使用flex的功能。

这将消除浮动问题，并且具有高度的灵活性和可定制性。

<div class="flex">
  <form class="loginform d-block">

  </form>

  <form class="signupform d-block"></form>
</div>

`

Answer 5

这种布局有两个不错的选择。您可以使用Display GRID或Display Flex。我将用Flex展示一个例子。但是我建议对所有项目进行审查，也许最好使用GRID Display。

这是一个结构示例，您不需要遵循它，但会推荐这种风格的东西。

<body class="container">
    <div class="content">
        <header class="content__header">
            ...
        </header>
        <div class="content__body">
            <div class="form-content">
                <form class="form form--register"></form>
            </div>
            <div class="form-content">
                <form class="form form--singup"></form>
            </div>
        </div>
        <footer class="content__footer">
            ...
        </footer>
    </div>
</body>

对于CSS来说

.content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.content__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
}

如何在同一行中对齐2个表格？

5 个答案: