logo标签列表

将表单与图片行内对齐

htmlcssbootstrap-4
3

我想做类似于这样的事情 在此输入图片描述

因此我按照以下步骤进行了操作

.page-account-box {
  width: 100%;
  margin-top: 70px;
}

.page-account-box .ds-userlogin .account-box {
  width: 100%;
  height: auto;
  padding: 0;
  border: 1px solid #e2efef;
  position: relative;
  margin: 70px auto 30px;
  display: table;
  background: #fff;
  border-radius: 20px;
}

.page-account-box .ds-userlogin .account-box .picture_account {
  display: inline;
  width: 50%;
}

.page-account-box .ds-userlogin .account-box .account-box-content {
  min-height: 50%;
  padding: 15px 30px;
  text-align: center;
  border-radius: 20px;
  display: inline;
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row">
    <div class="page-account-box">
      <div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
        <div class="ds-userlogin">
          <div class="account-box">
            <div class="picture_account"><img src="https://via.placeholder.com/200.jpg" class="imgFormat" /></div>
            <div class="account-box-content">
              <form method="post" class="form-account form-inline ">
                <div class="form-account-title">
                  <input type="text" style="border:solid" id="FullName">
                  <label for="email-phone">Fullname</label>
                </div>

                <div class="form-account-title">
                  <input type="password" style="border:solid" id="Password">
                  <label for="password">Password</label>
                </div>
                <div class="form-row-account">
                  <a onclick="Registeruser()" class="btn btn-primary btn-register">Register  </a>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

但结果可能会像这样： enter image description here 如何使表单与图片并排显示？
3个回答
2

我该如何让表单与图片在同一行显示？

请移除你的CSS，并在HTML中替换account-box：

<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="account-box row">
  <div class="account-box-content col">
    <form method="post" class="form-account form-inline ">
      <div class="form-account-title">
        <input type="text" style="border:solid" id="FullName">
        <label for="email-phone">Fullname</label>
      </div>
      <div class="form-account-title">
        <input type="password" style="border:solid" id="Password">
        <label for="password">Password</label>
      </div>
      <div class="form-row-account">
        <a onclick="Registeruser()" class="btn btn-primary btn-register">Register  </a>
      </div>
    </form>
  </div>
  <div class="picture_account col">
    <img src="https://via.placeholder.com/200.jpg" class="imgFormat" />
  </div>
</div>

使用row类将包含图像和表单的容器转换为行，同时在表单和图像上使用col类将它们放在不同的列中。此外，现在在标记中，您的图像位于表单下方，因此在视觉上它出现在左侧。

@tacoshy 这样好一些吗？ - Zach Jensz
首先，OP使用Bootstrap，因此应该使用Bootstrap。使用纯CSS还是框架更好完全基于个人意见。您的建议可能不可行，因为整个网站很可能都在使用该框架，而不仅仅是单个表单。此外，通常这是公司或客户的任务。因此，专门标记为框架的问题也应使用该框架。但是，如果您使用OP的代码和[repro]，则可以大大改进您的问题。 - tacoshy
@tacoshy 现在使用Bootstrap，已经移除了意见。还有其他反馈吗？ - Zach Jensz
就像我说的那样，使用<>按钮或在添加代码时按Ctrl+M来使用[repro]。如果使用了框架，请添加依赖项（我已经为您完成了）。这样，代码可以运行并直接验证您的答案。因此，您的答案现在符合良好答案的所有标准。它是技术上正确的，主题相关的，验证和解决了问题。 - tacoshy
0

你可以尝试将以下内容添加到你的account-box-content类中：

 float: left;

这里有一个 JSFiddle，你可以在上面看到它的工作效果：https://jsfiddle.net/gx3y8ksc/

答案太过宽泛。如果您想引导 Op 朝某个方向发展，请使用评论选项。答案选项是为了提供一个明确的解决方案，最好能够通过一个工作代码示例进行验证。代码示例必须直接包含在答案中，以便自我包含。外部资源只能用作扩展，但永远不能作为独立的资源！ - tacoshy
0

.page-account-box {
  width: 100%;
  margin-top: 70px;
}

.page-account-box .ds-userlogin .account-box {
  width: 100%;
  height: auto;
  padding: 0;
  border: 1px solid #e2efef;
  position: relative;
  margin: 70px auto 30px;
  display: table;
  background: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-account-box .ds-userlogin .account-box .picture_account {
  display: inline;
  border-radius: 0 20px 20px 0;
  overflow: hidden;
}

.page-account-box .ds-userlogin .account-box .account-box-content {
  width: 100%;
  max-width: 250px;
  margin-right: auto;
  padding: 15px;
  text-align: center;
  border-radius: 20px;
  display: inline;
}
.page-account-box .ds-userlogin .account-box .account-box-content form {
  width: 100%;
}
.page-account-box
  .ds-userlogin
  .account-box
  .account-box-content
  form
  .form-account-title {
  width: 100%;
  margin: 0 0 10px 0;
}
.page-account-box
  .ds-userlogin
  .account-box
  .account-box-content
  form
  .form-account-title
  input {
  width: 100%;
}
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
  integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<!-- Body -->
<div class="container">
  <div class="row">
    <div class="page-account-box">
      <div class="col-lg-8 col-md-8 col-xs-12 mx-auto">
        <div class="ds-userlogin">
          <div class="account-box">

            <div class="account-box-content">
              <form method="post" class="form-account form-inline ">
                <div class="form-account-title">
                  <input type="text" style="border:solid" id="FullName">
                  <label for="email-phone">Fullname</label>
                </div>

                <div class="form-account-title">
                  <input type="password" style="border:solid" id="Password">
                  <label for="password">Password</label>
                </div>
                <div class="form-row-account d-flex justify-content-center w-100">
                  <a onclick="Registeruser()" class="btn btn-primary btn-register">Register </a>
                </div>
              </form>
            </div>
            <div class="picture_account"><img src="https://via.placeholder.com/200.jpg" class="imgFormat" /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接