Question

我希望这两个td具有相同的长度并保持在红色边框内。但文本框超出了它。

带有黑色边框的外部div的位置设置为“固定”。这需要将该div放在页面中心。

即使我将td宽度设置为50％，它也不起作用。我明白，这是因为主要的div有一个固定的位置。那么在这种情况下如何解决呢。

CSS：

.loginBox
{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 450px;
    height: 210px;
    margin: auto;
background-image: url(file:///C:/Users/HOME/Desktop/box-bg.jpg);
    background-repeat: repeat;
border: 1px solid rgb(18, 18, 18);
    box-shadow: 0px 6px 24px 12px rgba(0, 0, 0, 0.15);
}
.inner
{
border:1px solid red;
margin:20px;
width:91%;
}

HTML：

<div class="loginBox">    
  <div class="inner">
   <table width="100%">
    <tr>
     <td>
      Username
      <div><input type="text"/></div>
     </td>
     <td>
      Password
      <div><input type="text"/></div>
     </td>
    </tr>
   </table>
  </div>
</div>

enter image description here

Answer 1

将此添加到您的CSS：

.inner td {
  width: 50%;
}

.inner td input{
  width: 100%;
}

<强> UDPATE：

您可以通过以下方式改进：

.inner td {
    width: 50%;
    white-space: nowrap;
}

.inner td input{
    width: 99%; /* decreased for border width */
    border: 1px solid #ddd;
}

Answer 2

基本上缺少的是输入元素的宽度。我Here (fiddle)就是这样做的（进一步改进）：

CSS：

    .loginBox {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 24em;
        height: 10em;
        margin: auto;
        background-image: url(file:///C:/Users/HOME/Desktop/box-bg.jpg);
        background-repeat: repeat;
        border: 1px solid rgb(18, 18, 18);
        box-shadow: 0px 6px 24px 12px rgba(0, 0, 0, 0.15);
    }
    .inner {
        border:1px solid red;
        margin:1em;
        display:relative;
        width:91%;
        padding: 0.2em;
    }
    .input {
        padding: 1%;
        float: left;
        width: 46%;
    }
    input[type=text] {
        width: 100%;
    }
    span.clear {
        clear: left;
        display: block;
    }

HTML：

    <div class="loginBox">
        <div class="inner">
            <div class="input">Username
                <div>
                    <input type="text" />
                </div>
            </div>
            <div class="input">Password
                <div>
                    <input type="text" />
                </div>
            </div> <span class="clear"></span>

        </div>
    </div>

我改变了什么：

用div替换表（表标签应该用于表;））
使用填充（1％）和宽度（46％）为文本输入创建浮动div容器;为什么宽度为46％？由于两个输入的左右填充。
在浮动div之后添加clear元素以防止在周围div之外浮动

将元素放在固定元素中

2 个答案: