Question

制作类似html / css

的内容

alt text

Answer 1

你可以通过在div元素中包装每个输入和标签，然后浮动div来做你想要的。

HTML：

<div class="boxwrap">
    <div>
        <input type="text" size="6" />
        <h5>label1</h5>
    </div>
    <div>
        <input type="text" size="6" />
        <h5>label2</h5>
    </div>
    <div>
        <input type="text" size="6" />
        <h5>label3</h5>
    </div>
</div>
<div class="clearfloat"></div>

CSS：

div.boxwrap div {
    float: left ;
}
div.boxwrap div h5 {
    text-align: center ;
}
div.clearfloat {
    clear: both ;
}

Answer 2

这类似于@Gus的答案，但更多的语义：

<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>

使用以下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;
}

现场演示发布于：jsbin。

<小时/> 编辑让它变得更漂亮......

新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;
}

在jsbin

修改演示（再次）

Answer 3

这很粗糙，但您可以在其中添加一个绝对定位的div，并将其放置在需要的位置。您可能还必须绝对定位文本框。

你可能也可以在顶部获得负余量（尽管可能不在IE中）。

Answer 4

不涉及黑客攻击 - 应该是所有浏览器都友好。

<style type="text/css">
body {
    font-family: Arial, Helvetica, sans-serif;
}


.date-container {
    height: 50px;
    border: solid 1px;
}

.input {
    width: 35px;
    float: left;
    margin: 5px;
}
.field input {
    font-size: 12px;
    margin: 0;
    width: 35px;
    text-align: center;
}

.name {
    font-weight: bold;
    text-transform: capitalize;
    font-size: 11px;
    text-align: center;
}

</style>
<div class="date-container">
    <div class="input">

        <div class="field">
            <input type="text" name="day" id="day">
        </div>
        <div class="name">
            day
        </div>
    </div>

    <div class="input">

        <div class="field">
            <input type="text" name="hour" id="hour">
        </div>
        <div class="name">
            Min
        </div>
    </div>

    <div class="input">
        <div class="field">
            <input type="text" name="min" id="min">
        </div>
        <div class="name">
            day
        </div>
    </div>

    <div class="input">
        <div class="field">
            <input type="text" name="sec" id="sec">
        </div>
        <div class="name">
            Sec
        </div>
    </div>

</div>

Answer 5

这是最具语义性的方法（它可以一直回到IE6，不用担心）：

<html>
    <head>
        <title>Title</title>

        <style type="text/css">

            fieldset {
                border: none;
                overflow: auto;
            }

            label {
                display: block;
                float: left;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 75%;
                margin-right: 10px;
                text-align: center;
                width: 30px;
            }

            input {
                width: 30px;
            }

        </style>

    </head>
    <body>
        <form action="#">
            <fieldset>
                <label>
                    <input type="text" name="day" id="day">
                    Day
                </label>
                <label>
                    <input type="text" name="hour" id="hour">
                    Hour
                </label>
                <label>
                    <input type="text" name="minute" id="minute">
                    Min
                </label>
                <label>
                    <input type="text" name="second" id="second">
                    Sec
                </label>
            </fieldset>
        </form>
    </body>
</html>

如何在文本框下呈现文本？

5 个答案: