当前位置: 首页 > 面试题库 >

如何正确对齐div元素?

葛修真
2023-03-14
问题内容

我的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>

问题答案:

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



 类似资料:
  • 我的html文档的主体由3个元素组成,一个按钮、一个表单和一个画布。我希望按钮和窗体右对齐,画布保持左对齐。问题是,当我尝试对齐前两个元素时,它们不再相互跟随,而是水平地紧挨着?,这是我到目前为止的代码,我希望窗体直接跟随在右边的按钮之后,中间没有空格。 null null

  • 我目前已经用下面的代码创建了一个JFrame。我希望有三个JLabel,一个在另一个上面,它们对应的JTextFields在右边,下面有四个JButtons(我最终将使用插入来分隔它们)。但是,单元格在一行中在框架顶部对齐。谁能看出我正在犯的错误。多谢了。 它目前正在生产的JFrame是: **我意识到我没有在面板中设置GridBagLayout,所以添加了一行:

  • 问题内容: 我有一个包含两个图片的div和一个。它们都需要在div内垂直对齐,彼此相邻。 其中一张图片需要放在div内。 要在所有常见的浏览器上运行,需要什么CSS? 问题答案: 简而言之: 内联元素 (并且 仅 内联元素)可以在上下文中垂直对齐。但是,“上下文”不是整个父容器的高度,而是它们所在的文本行的高度 对于块元素,垂直对齐更加困难,并且在很大程度上取决于特定情况: 如果内部元件可以有一个

  • 问题内容: 由于某些原因,我的div不会在包含div的水平居中: 有时有一个行div,其中只有一个块div。我究竟做错了什么? 问题答案: 要实现您想要做的事情: 考虑使用代替。

  • 我正在使用angular 2与Bootstrap 4和angular Material。然而,我有困难正确地对齐我的容器div中的元素。我希望我的按钮和文本都对齐到右手边 下面是我尝试生成如照片所示结果的代码 我也从StackOverflow尝试过这个解决方案 这两种解决方案都不会将元素向右移动。我做错了什么?

  • 我需要树放置在右上角的Foo。