How can I add spaces between two <input> lin

2020-03-10 08:54发布

I want to control the layout with CSS. How can I regulate the spaces between <input> elements(I hope they are on two lines) using CSS?

<form name="publish" id="publish" action="publishprocess.php" method="post">
  Title:<input type="text" id="title" name="title" size="60" maxlength="110" value="<?php echo $title ?>" <br/>
  <div>Contact<input type="text" id="contact" name="contact" size="24" maxlength="30" value="<?php echo $contact ?>" /></div><br/> Task description(You may include task description, requirements on bidders, time requirements,etc):<br/>
  <textarea name="detail" id="detail" rows="7" cols="60" style="font-family:Arial, Helvetica, sans-serif"><?php echo $detail ?></textarea>

  <br/><br/> price <input type="text" id="price" name="price" size="10" maxlength="20" value="<?php echo $price ?>" /><br/>
  <label> Skill or Knowledge Tags</label><br/><input class="tagvalidate" type="text" id="tag" name="tag" size="40" maxlength="60" value="<?php echo $tag ?>" />
  <br/><label>Combine multiple words into single-words, space to separate up to 3 tags<br/>(Example:photoshop quantum-physics computer-programming)</label><br/><br/> District Restriction:
  <?php echo $locationtext.$cityname; ?><br/><br/>

  <input type="submit" id="submit" value="submit" /></form>

As you see, I use <br/> to separate elements and get spaces, is there a better way to do it?

标签: html css layout
7条回答
冷血范
2楼-- · 2020-03-10 09:39

You can format them as table !!

form {
  display: table;
}
label {
  display: table-row;
}
input {
  display: table-cell;
}
p1 {
  display: table-cell;
}
<div id="header_order_form" align="center">
  <form id="order_header" method="post">
    <label>
      <p1>order_no:
        <input type="text">
      </p1>
      <p1>order_type:
        <input type="text">
      </p1>
    </label>
    </br>
    </br>
    <label>
      <p1>
        creation_date:
        <input type="text">
      </p1>
      <p1>delivery_date:
        <input type="text">
      </p1>
      <p1>billing_date:
        <input type="text">
      </p1>
    </label>
    </br>
    </br>

    <label>
      <p1>sold_to_party:
        <input type="text">
      </p1>
      <p1>sop_address:
        <input type="text">
      </p1>
    </label>
  </form>
</div>

查看更多
登录 后发表回答