BinaryDevelop
  1. ホーム
  2. css

[解決済み] div 要素を右寄せにするには？

2022-03-19 05:31:43

質問

私のhtml文書の本文は、ボタン、フォーム、キャンバスの3つの要素で構成されています。ボタンとフォームを右寄せに、キャンバスを左寄せにしたいのですが、どうすればよいでしょうか？問題は、最初の2つの要素を整列させようとすると、もはや互いに続かず、代わりに水平に隣り合っていることです。 

#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="600" height="600" style="background:lightgray;">
      <p>Your browser doesn't support canvas.</p>
    </canvas>
  </div>
</body>
</html>

解決方法は？

フォームとボタンの両方を含む div を作成し、その div を右にフロートさせることができます。 float: right; .

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します