Question

Make something like in html/css

Answer 1

This is similar to @Gus’ answer, but a little more semantic:

<form action="" method="post">
  <fieldset>
    <input type="text" name="day" id="day" />
    <label for="day">Day</label>
  </fieldset>
  <fieldset>
    <input type="text" name="hour" id="hour" />
    <label for="hour">Hour</label>
  </fieldset>
  <fieldset>
  <input type="text" name="min" id="min" />
    <label for="min">Min</label>
  </fieldset>
  <fieldset>
    <input type="text" name="sec" id="sec" />
    <label for="sec">Sec</label>
  </fieldset>
</form>

With the following CSS:

fieldset {
  display: inline-block;
  width: 10em;
  margin: 0 1em 0 0;
  border: 1px solid #ccc;
}

fieldset > input,
fieldset > label {
  display: block;
  width: 8em;
  text-align: center;
  margin: 0 auto;
}

Live demo posted at: jsbin.

---

Edited to make it a just a little prettier…

New CSS:

form {
  width: 49.5em;
  overflow: hidden;
  border: 1px solid #ccc;
}
fieldset {
  display: block;
  float: left;
  width: 10em;
  margin: 0 1em 0 0;
  border: 1px solid #ccc;
}
  fieldset:last-child {
  margin: 0;
}

fieldset > input,
fieldset > label {
  display: block;
  text-align: center;
  margin: 0 auto;
}
fieldset > input {
  width: 80%;
  font-size: 1.4em;
}

And revised demo (again) at jsbin