Question

我有一个固定宽度的div，我需要将两个td置于中间位置。这是我的小提琴：http://codepen.io/anon/pen/YyrOZm

HTML：

    <div class="managed-form">
<table>
      <tr>
        <td>
          <label title="Company">
            Company
          </label>
          <input size="30" type="text">
        </td>
        <td>
          <label title="Title">
            Title
          </label>
          <input class="" name="Title" size="30" type="text" value="">
        </td>
      </tr>
<table>
    </div>

CSS：

.managed-form{
  background-color: #5B8F22;
  width: 311px;
  height: 369px;
}

Answer 1

让你inputs宽度为100％。像这样：

input[type="text"]{
  width:100%;
}

CodePen

Answer 2

我为所有元素添加了border-box（可能不是你想在整个页面普遍应用的东西，它会影响填充间距等。）

但是，似乎确实更好地集中了项目：

CodePen

CSS：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.managed-form{background-color: #5B8F22;
    width: 311px;
    height: 369px;}

input[type="text"]{
  width:100%;
}

进一步阅读： Box-Sizing

Answer 3

我会这样做

HTML：

<div class="managed-form">
<table>
    <tr>
        <td>
            <label for="company">
                Company:<br>
                <input type="text">
            </label>
        </td>
                </tr>
            <tr>
        <td>
            <label for="title">
                Title:<br>
                <input tyoe="text">
        </td>
    </tr>
</table>

CSS：

.managed-form
{
    background-color:red;
    width: 311px;
    height: 369px;
}
table {
 margin-left:auto;
    margin-right:auto;
}

中心td在固定宽度div内

3 个答案: