代码之家 › 专栏 › 技术社区 › Bobby

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

css html

Bobby · 技术社区 · 14 年前

在HTML/CSS中生成类似的内容

alt text

5 回复 | 直到 14 年前

David Thomas 14 年前

这与@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

Gus 14 年前

您可以通过将每个输入和标签包装在DIV元素中并浮动DIV来完成您想要的操作。

Example Here

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

JoshD 14 年前

它很粗糙,但您可以添加一个绝对定位的DIV,其中包含文本,并将其定位到需要的地方。您可能还必须绝对地定位文本框。

你可能也能摆脱顶部的负边缘(可能不是在IE中)。

Glycerine 14 年前

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

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

Marcus 14 年前

下面是最语义化的方法(它可以一直追溯到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>