Question

我已经尝试了几个小时来整齐地格式化我的表格而不使用表格。

我已经将标签左侧和右边的标签浮起，但它们仍然没有整齐地排列在一起。理想情况下它看起来像这样：

标签（根直径）|输入（文字）|标签（毫米）

我知道我可以用桌子来做，但我正在寻找一种更优雅和专业的方式。如果有人能指出我正确的方向并且可能给我一个例子，我将非常感激。

这是我的代码。

HTML：

<head>

    <script src="jquery-1.11.0.min.js"></script>
    <script src="criticalSpeedCalc.js"></script>
    <link rel="stylesheet" href="calcstyle.css">

</head>

<body>
    <div id="calcWrapper">
        <form name="calculator" id="calculator">
            <label class="type">Unit of Measurement:</label>
            <br>
            <select name="unit" class="input">
                <option value="120904000">Metric (cm)</option>
                <option value="4760000">Imperial (inches)</option>
            </select>
            <br>
            <label class="type">Root Diameter:</label>
            <br>
            <input type="text" name="root" class="input" autocomplete="off">
            <label for="unit">mm</label>
            <br>
            <label class="type">Width between bearings:</label>
            <br>
            <input type="text" name="bearings" class="input" autocomplete="off">
            <label for="unit">mm</label>
            <br>
            <label class="type">End Fixity:</label>
            <br>
            <select name="fixity" class="input">
                <option value=".36">1</option>
                <option value="1.0">2</option>
                <option value="1.47">3</option>
                <option value="2.23">4</option>
            </select>
            <br>
            <label class="type">Max Speed:</label>
            <br>
            <input type="text" name="speed" class="input" autocomplete="off">
            <label for="rpm">rpm</label>
            <br>
            <br>    <a href="#" id="reset" class="input" onclick="">Reset</a>
<a href="#" id="calculate" class="input" onclick="Calculate(); return(false);">Calculate</a>
<a href="#" id="close" class="input" onclick="">Exit</a>

        </form>
    </div>
</body>



#calcWrapper {

    background-image: url("Design1.png");

    width: 265px;

    height: 365px;

    float: left;

    /*border-width: 2px;
border-style: solid;*/

}

的CSS：

#calculator {

    width: 186px;

    height: 230px;

    margin-left: 38px;

    margin-top: 115px;

    padding-left: 5px;

    font: bold 11px Helvetica, Arial, sans-serif;

    text-align: center;

    -moz-box-sizing:content;

    /*border-width: 2px;
border-style: solid;*/

}



.input {

    margin: 1px;

    max-width: 80px;

    max-height: 10px;

    font: bold 10px Helvetica, Arial, sans-serif;

    display: block;

    vertical-align:middle;

    margin-bottom: 10px;

    float: right;

}

select.input {

    max-height: 18px;

}

label.type {

    width: 80px;

    display: block;

    vertical-align:middle;

    float:left;

    clear:left;

    margin: 2px;

}

这是一个小提琴link

Answer 1

你可以＆＃34;正常＆＃34; html标签和使用CSS Table Model

的表格式显示

Answer 2

由于这不是表格数据，因此不使用表格是正确的选择，但您可以使用div元素创建表格：）

.table {
    display:table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display:table-cell;
    vertical-align:middle;
}

这是小提琴：http://jsfiddle.net/3Ej7Q/3/

Answer 3

您可以将.input课程浮动到left并使其稍微缩小（max-width:70px）。

请在此处查看：http://jsbin.com/pepixare/1/edit

Answer 4

我用div来解决这个问题。我的宽度为％，如果您愿意，可以使用px。

col-以％表示div的宽度。（col-40 == width：40％;）

您可以使用输入，ul，ol，a，img ect等其他属性轻松实现此功能。

<div class="table">
<div class="tr">
    <div class="th col-40 fl pd-l-2">monday</div>
    <div class="td col-2 fl">&#58;</div>
    <div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
<div class="tr">
    <div class="th col-40 fl">tuesday</div>
    <div class="td col-2 fl">&#58;</div>
    <div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
</div>

.table {
width: 100%;
float: left;
cursor: pointer;

}

.table .tr {
float:left;
width:100%;
height:40px;

}

.table .tr .th,
.table .tr .td {
height:47%;
padding:5% 0;

}

Answer 5

我设法找到我的问题的解决方案，其中涉及设置表单中的所有元素以显示：inline-block，并将表单的文本结构设置为对齐。

为了更好的解释，我可以给予this一个squiz。（答案在文本对齐部分）

here是指向更新小提琴的链接

希望我能够帮助处于同样困境的任何人。

如何在不使用表的情况下有效地格式化表单元素？

5 个答案: