Question

我有一个目前全部放在一栏中的表格，我希望将其分为两列。

我尝试添加div类，但是表单仍然只是一列，我不想对当前表单本身进行任何更改。我希望能够将其分为两列。

我也不希望更改字段上的当前CSS效果。

install

$yellow:#f5ba1a;
$black:#000000;
$grey:#cccccc;

   .form-style-1{
 font-family: Verdana, Geneva, sans-serif;
font-size: 0.em;
width: 40em;
padding: 1em;
border: 1px solid #cbc9c9;
overflow:auto;
resize:both;

   }

   .form-style-1 fieldset{
       border-radius:none;

   background-color:#ebebeb;

   padding:5px;

    border:1px solid #cbc9c9;

  width:450px;

   margin:auto;
   box-shadow: 1px 2px 5px rgba(0,0,0,.31);
       -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31);

   }



            .form__field {
                display: block;
}
[class*="--checkbox"] {
                display: inline-block;
}
[data-conditional] {
                display: none;
}
#flight:checked ~ [data-conditional*="flight"] {
                display: block;
}
#hotel:checked ~ [data-conditional*="hotel"] {
                display: block;
}
#transfer:checked ~ [data-conditional*="travel"] {
                display: block;
}

input[type="text"]
{
 display:block;
 width: 50%;
      padding: 8px 10px 9px 35px;
      height: 25px;
    
      box-sizing: border-box;
      outline: none;
      -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      transition: all 0.30s ease-in-out;
    background-color: #fff;
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  border: solid 1px #cbc9c9;
  -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
  -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
  border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}

input[type="date"]
{
    display:block;
  width: 50%;
      padding: 8px 10px 9px 35px;
      height: 25px;
       
      box-sizing: border-box;
      outline: none;
      -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      transition: all 0.30s ease-in-out;
     background-color: #fff;
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  border: solid 1px #cbc9c9;
  -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
  -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
  border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}

textarea {
    display:block;
     width: 50%;
      padding: 8px 10px 9px 35px;
      height: 25px;
     
      box-sizing: border-box;
      outline: none;
      -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      transition: all 0.30s ease-in-out;
  background-color: #fff;
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  border: solid 1px #cbc9c9;
  -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
  -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
  border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}

select {
    display:block;
     width: 50%;
      padding: 8px 10px 9px 35px;
      height: 35px;
      box-sizing: border-box;
      outline: none;
      -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      transition: all 0.30s ease-in-out;
      background-color: #fff;
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  border: solid 1px #cbc9c9;
  -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
  -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
  border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}

input[type="time"]
{
    display:block;
  width: 50%;
      padding: 8px 10px 9px 35px;
      height: 25px;

      box-sizing: border-box;
      outline: none;
      -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      transition: all 0.30s ease-in-out;
     background-color: #fff;
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  box-shadow: 1px 2px 5px rgba(0,0,0,.09);
  border: solid 1px #cbc9c9;
  -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
  -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
  border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}

h1 {
  font-size: 32px;
  font-weight: 300;
  color: #4c4c4c;
  text-align: center;
  padding-top: 10px;
  margin-bottom: 10px;
}

a.button {
  font-size: 14px;
  font-weight: 600;
  color: white;
  padding: 6px 25px 0px 20px;
  margin: 10px 8px 20px 0px;
  display: inline-block;
  float: right;
  text-decoration: none;
  width: 50px; height: 27px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #3a57af;
  -webkit-box-shadow: 0 3px rgba(58,87,175,.75);
  -moz-box-shadow: 0 3px rgba(58,87,175,.75);
  box-shadow: 0 3px rgba(58,87,175,.75);
  transition: all 0.1s linear 0s;
  top: 0px;
  position: relative;
}

a.button:hover {
  top: 3px;
  background-color:#2e458b;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

}

p {

    color:black;
    
}

Answer 1

如果我没有正确理解，请尝试将标签和输入字段包装在div中，然后将其设置为内联块？

HTML：

   <div class="form-input">
        <label class="form__field form__field--text" data-conditional="flight hotel travel" for="name">
            <span class="form__label">Traveler Name</span>
            <input class="form__input" id="name" maxlength="80" name="name" size="20" type="text" /> 
        </label>
    </div>

CSS：

.form-input {
   display: inline-block;
}

Answer 2

利用CSS网格获取这两列。

$yellow: #f5ba1a;
      $black: #000000;
      $grey: #cccccc;

      .form-style-1 {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 0em;
        width: 40em;
        padding: 1em;
        border: 1px solid #cbc9c9;
        overflow: auto;
        resize: both;
      }

      .form-style-1 fieldset {
        border-radius: none;

        background-color: #ebebeb;

        padding: 5px;

        border: 1px solid #cbc9c9;

        width: 450px;

        margin: auto;
        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31);
        -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31);
        -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31);
      }

      .form__field {
        display: block;
      }
      [class*="--checkbox"] {
        display: inline-block;
      }
      [data-conditional] {
        display: none;
      }
      #flight:checked ~ [data-conditional*="flight"] {
        display: grid;
        grid-template-columns: auto auto;
      }
      #hotel:checked ~ [data-conditional*="hotel"] {
        display: grid;
        grid-template-columns: auto auto;
      }
      #transfer:checked ~ [data-conditional*="travel"] {
        display: grid;
        grid-template-columns: auto auto;
      }

      input[type="text"] {
        display: block;
        width: 50%;
        padding: 8px 10px 9px 35px;
        height: 25px;

        box-sizing: border-box;
        outline: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #fff;
        -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        border: solid 1px #cbc9c9;
        -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
        -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
        border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
      }

      input[type="date"] {
        display: block;
        width: 50%;
        padding: 8px 10px 9px 35px;
        height: 25px;

        box-sizing: border-box;
        outline: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #fff;
        -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        border: solid 1px #cbc9c9;
        -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
        -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
        border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
      }

      textarea {
        display: block;
        width: 50%;
        padding: 8px 10px 9px 35px;
        height: 25px;

        box-sizing: border-box;
        outline: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #fff;
        -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        border: solid 1px #cbc9c9;
        -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
        -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
        border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
      }

      select {
        display: block;
        width: 50%;
        padding: 8px 10px 9px 35px;
        height: 35px;
        box-sizing: border-box;
        outline: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #fff;
        -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        border: solid 1px #cbc9c9;
        -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
        -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
        border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
      }

      input[type="time"] {
        display: block;
        width: 50%;
        padding: 8px 10px 9px 35px;
        height: 25px;

        box-sizing: border-box;
        outline: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #fff;
        -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        -moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
        border: solid 1px #cbc9c9;
        -webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
        -moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
        border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
      }

      h1 {
        font-size: 32px;
        font-weight: 300;
        color: #4c4c4c;
        text-align: center;
        padding-top: 10px;
        margin-bottom: 10px;
      }

      a.button {
        font-size: 14px;
        font-weight: 600;
        color: white;
        padding: 6px 25px 0px 20px;
        margin: 10px 8px 20px 0px;
        display: inline-block;
        float: right;
        text-decoration: none;
        width: 50px;
        height: 27px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background-color: #3a57af;
        -webkit-box-shadow: 0 3px rgba(58, 87, 175, 0.75);
        -moz-box-shadow: 0 3px rgba(58, 87, 175, 0.75);
        box-shadow: 0 3px rgba(58, 87, 175, 0.75);
        transition: all 0.1s linear 0s;
        top: 0px;
        position: relative;
      }

      a.button:hover {
        top: 3px;
        background-color: #2e458b;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
      }

      p {
        color: black;
      }

<body>
    <div class="form-style-1">
      <h1>Travel Registration Form</h1>
      <form action="" method="POST">
        <input name="orgid" type="hidden" value="00D8E000000DW9t" />
        <input name="retURL" type="hidden" value="http://" />
        <fieldset>
          <h3>
            Select Travel
          </h3>
          <input
            class="form__input form__input--checkbox"
            data-input="00N8E000002AjRq"
            id="flight"
            type="checkbox"
          />
          <label class="form__field form__field--checkbox" for="flight">
            <span class="form__label">Flight</span>
          </label>
          <input
            class="form__input form__input--checkbox"
            id="hotel"
            type="checkbox"
          />
          <label class="form__field form__field--checkbox" for="hotel">
            <span class="form__label">Hotel</span>
          </label>

          <input
            class="form__input form__input--checkbox"
            id="transfer"
            type="checkbox"
          />
          <label class="form__field form__field--checkbox" for="transfer">
            <span class="form__label">Transfer </span>
          </label>

          <!--Above is the checkboxes code -->

          <p
            class="form__field form__field--text"
            data-conditional="flight hotel travel"
          >
            <span class="form__input">Traveler's Information </span>
          </p>

          <div data-conditional="flight hotel travel">
            <label class="form__field--text" for="name"
              ><span class="form__label">Traveler Name </span
              ><input
                class="form__input"
                id="name"
                maxlength="80"
                name="name"
                size="20"
                type="text"
              />
            </label>

            <label class="form__field--text" for="email"
              >Email<input
                class="form__input"
                id="email"
                maxlength="80"
                name="email"
                size="20"
                type="text"
            /></label>

            <label class="form__field--text" for="phone"
              >Phone<input
                class="form__input"
                id="phone"
                maxlength="40"
                name="phone"
                size="20"
                type="text"
            /></label>

            <label class="form__field--text" for="subject"
              >Subject<input
                class="form__input"
                id="subject"
                maxlength="80"
                name="subject"
                size="20"
                type="text"
            /></label>

            <label class="form__field--text" for="description"
              >Description<textarea
                class="form__input"
                name="description"
              ></textarea
            ></label>
          </div>
        </fieldset>
      </form>
    </div>
  </body>

您现在可以减小输入的宽度或增大form-style-1的宽度，以实现更优雅的设计。

如何将输入字段分为两列？

2 个答案: