应用填充以显示:table-cell元素

时间:2010-11-10 00:42:00

标签: html padding css-tables

我正在尝试使用display:table-cell将填充应用于元素的左侧。我正在使用Webkit浏览器,这只需要在Webkit浏览器中工作(是的!)。

它以正确的排列显示,但好像根本没有填充。

任何指针?在涉及display:table

时,我有点新手

这是我的HTML(我已经嵌入了css inline,因此在这里更容易阅读):

<div class="setting-group" style="display:table">
   <div class="title">Title</div>
   <div class="field" style="display:table-row">
      <span class="label" style="display:table-cell">Label</span>
      <select class="value" style="display:table-cell; padding-left: 20px" id="id">
         <option value="Opt 1">Option 1</option>
         ...
      </select>
    </div>
</div>

3 个答案:

答案 0 :(得分:2)

将你的选择包裹在一个范围内:

<span class="select" style="display:table-cell; padding-left:20px"><select class="value"  id="id"></span>

答案 1 :(得分:1)

您也可以使用该属性......

border-spacing:10px;

答案 2 :(得分:0)

老派风格,也许?

    .setting-group {
        padding-left:50px;
    }

    .setting-group .field .label {
        padding-right:20px;
    }