HTML输入在div中对齐

Question

我正在尝试根据图像对齐所有输入。我试图放置<center>以便div位于中心，但我不知道如何根据给定的图像对齐元素。

＆＃13;

＆＃13;

<center>
    <div>
        <div>
            <center>
            Priority:
            <input  align="middle" type="radio" id="high" name="priority" value="High">
            High
            <input type="radio" id="medium" name="priority" value="Medium">
            Medium
            <input type="radio" id="low" name="priority" value="Low">
            Low
             </center>
        </div>
        <br />
        <div>
            <label for="subject">Subject: </label>
            <input type="text" id="subject" name="subject">  
        </div>
        <br />
        <div>
            <label for="appointment_date">Date: </label>
            <input type="date" id="appointment_date" name="appointment_date">

            <label for="start_time">Start Time</label>
            <input type="time" id="start_time" name="start_time" />

            <label for="end_time">End Time</label>
            <input type="time" id="end_time" name="end_time"/>
        </div>
        <br />
        <input type="button" onclick="addAppointment()" value="Add Appointment" />
        <br />
    </div>
    <hr>
</center>

＆＃13;

＆＃13;

＆＃13;

提前致谢

Answer 1

如果你不想写CSS。使用Bootstrap来构建它。为此添加了示例代码。

HTML5不支持
1. Center并弃用。
2. 开始编写自定义CSS
＆＃13;
＆＃13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container">
    <!-- first row -->
    <div class="row my-3">
      <div class="col-sm-3">Priority:</div>
      <div class="col-sm-3"><input align="middle" type="radio" id="high" name="priority" value="High"> High
      </div>
      <div class="col-sm-3"><input type="radio" id="medium" name="priority" value="Medium"> Medium
      </div>
      <div class="col-sm-3"><input type="radio" id="low" name="priority" value="Low"> Low
      </div>
    </div>
    <!-- second row -->
    <div class="row my-3">
      <div class="col-sm-3"><label for="subject">Subject: </label></div>
      <div class="col-sm-9"><input type="text" class="form-control" id="subject" name="subject"></div>
    </div>

  <!-- 3rd row -->

  <div class="row my-3">
    <div class="col-sm-4"> <label for="appointment_date">Date: </label>
      <input type="date" id="appointment_date" name="appointment_date"></div>
    <div class="col-sm-4"><label for="start_time">Start Time</label>
      <input type="time" id="start_time" name="start_time" /></div>
    <div class="col-sm-4"><label for="end_time">End Time</label>
      <input type="time" id="end_time" name="end_time" /></div>
  </div>
  <!-- 4th row -->

  <div class="row my-3">
    <div class="col-sm-12 text-center">
      <input type="button" onclick="addAppointment()" value="Add Appointment" />
    </div>
  </div>

  </div>
  <!-- container ends -->
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以使用flex执行此操作。

请参阅code pen created

#priotityContainer{
  display:flex;
  flex:1;
  justify-content:space-around;
}

Answer 3

你可以使用flex-box制作它：

.wrapper {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 6px 0;
			max-width: 600px;
			margin: auto;
			
		}

input[type="text"] {
		   width: 100%;
		   margin-left: 15px;
	   }

    <div>
	<div class="wrapper">
		Priority:
		<span><input align="middle" type="radio" id="high" name="priority" value="High"> High</span>
		<span><input type="radio" id="medium" name="priority" value="Medium"> Medium</span>
		<span><input type="radio" id="low" name="priority" value="Low"> Low</span>
	</div>
	<div class="wrapper">
		<label for="subject">Subject: </label>
		<input type="text" id="subject" name="subject">
	</div>
	<div class="wrapper">
		<label for="appointment_date">Date: </label>
		<input type="date" id="appointment_date" name="appointment_date">

		<label for="start_time">Start Time</label>
		<input type="time" id="start_time" name="start_time" />

		<label for="end_time">End Time</label>
		<input type="time" id="end_time" name="end_time" />
	</div>
	<center> <input type="button" onclick="addAppointment()" value="Add Appointment" />

	</center>
    </div>
    <hr>

Answer 4

这里是我使用bootstarp的代码：

<!DOCTYPE html>
<html lang="cs">

<head>
  <meta charset="utf-8">
  <meta name="author" content="Vojtěch Matras">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-2 col-2" >Priority</div>
      <div class="col-sm-10 col-10" > <input type="radio" name="Priority" value="high">high<br>
        <input type="radio" name="Priority" value="medium"> medium<br>
        <input type="radio" name="Priority" value="low"> low</div>
   </div>
    <div class="row">
          <div class="col-sm-2 col-2" >Subject</div>
          <div class="col-sm-10 col-10" style="display: block"><input type="text"></div>
    </div>
    <div class="row">
        <div class="col-sm-2 col-2" >Date:</div>
        <div class="col-sm-2 col-2" ><input type="date" id="appointment_date" name="appointment_date"></div>
        <div class="col-sm-2 col-2" >Start time:</div>
        <div class="col-sm-2 col-2" ><input type="time" id="start_time" name="start_time" /></div>
        <div class="col-sm-2 col-2" >End time:</div>
        <div class="col-sm-2 col-2" ><input type="time" id="end_time" name="end_time"/></div>
  </div>

  </div>

  <center><input type="button" value="Add Appointment"></center>

</html>

你可以在这里查看小提琴：https://jsfiddle.net/mgdzuod4/