如何正确对齐div元素？

CSS

达蒙

2020-03-23

我的html文档的正文包含3个元素，一个按钮，一个表单和一个画布。我希望按钮和表单右对齐，而画布保持左对齐。问题是当我尝试对齐前两个元素时，它们不再彼此跟随而是在水平方向上彼此相邻？，这是我到目前为止的代码，我希望表格紧跟在右边的按钮之后中间没有空格。

#cTask {
  background-color: lightgreen;
}

#button {
  position: relative;
  float: right;
}

#addEventForm {
  position: relative;
  float: right;
  border: 2px solid #003B62;
  font-family: verdana;
  background-color: #B5CFE0;
  padding-left: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
  <script type="text/javascript" src="timeline.js"></script>
  <link rel="stylesheet" href="master.css" type="text/css" media="screen" />
</head>

<body bgcolor="000" TEXT="FFFFFF">
  <div id="button">
    <button onclick="showForm()" type="button" id="cTask">
        Create Task
    </button>
  </div>
  <div id="addEventForm">
    <form>
      <p><label>Customer name: <input></label></p>
      <p><label>Telephone: <input type=tel></label></p>
      <p><label>E-mail address: <input type=email></label></p>
    </form>
  </div>
  <div>
    <canvas id="myBoard" width="1000" height="600">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>

第2711篇《如何正确对齐div元素？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共10个回答
阿飞 2020.03.23

简单的答案在这里：

<div style="text-align: right;">
    anything:
    <select id="locality-dropdown" name="locality" class="cls" style="width: 200px; height: 28px; overflow:auto;">
    </select>
</div>
猴子猿 2020.03.23

如果使用引导程序，则：

<div class="pull-right"></div>
Mandy村村 2020.03.23

我知道这是一篇过时的文章，但您不能只说<div id=xyz align="right">对了。

您可以将right替换为left，center和justify。

在我的网站上工作：）

小宇宙 2020.03.23

如果您不必支持IE9及以下版本，则可以使用flexbox解决此问题：codepen

IE10和11也有一些错误（对flexbox的支持），但是在此示例中不存在

您可以将<button>和和垂直对齐，方法是将和<form>包装在中flex-direction: column。元素的源顺序将是它们从上到下显示的顺序，因此我对它们进行了重新排序。

然后，您可以将表单和按钮容器与画布水平对齐，方法是将它们包装在容器中flex-direction: row。同样，元素的源顺序将是它们从左到右显示的顺序，因此我对它们进行了重新排序。

同样，这将要求您从问题中链接的代码中删除所有规则position和float样式规则。

这是上面链接的代码笔中HTML的精简版本。

<div id="mainContainer">
  <div>
    <canvas></canvas>
  </div>
  <div id="formContainer">
    <div id="addEventForm"> 
      <form></form>
    </div>
    <div id="button">
      <button></button>
    </div>
  </div>
</div>

这是相关的CSS

#mainContainer {
  display: flex;
  flex-direction: row;
} 

#formContainer {
  display: flex;
  flex-direction: column;
}
樱小胖Mandy 2020.03.23

您可以简单地使用padding-left：60％（例如ex）将您的内容向右对齐，同时将内容包装在响应式容器中（在我的情况下，我需要用navbar）以确保它在所有示例中都有效。

蛋蛋猿 2020.03.23

您可以使用flexboxwith flex-grow将最后一个元素推到右侧。

<div style="display: flex;">
  <div style="flex-grow: 1;">Left</div>
  <div>Right</div>
</div>
古一 2020.03.23

浮点数还可以，但是ie6和7会出现问题。

我更喜欢margin-left:auto; margin-right:0;在内部div上使用。

小胖LEY 2020.03.23

你是这个意思吗 http://jsfiddle.net/6PyrK/1

您可以添加的属性float:right，并clear:both;以表格和按钮

西里泡芙 2020.03.23

如果要在父div的右端并排对齐多个div，请在父div text-align: right;上进行设置。

阿飞 2020.03.23

您可以创建一个同时包含表单和按钮的div，然后通过设置将div浮动到右侧float: right;。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android