html - 将元素放在固定元素内

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>

Answer 1

将此添加到您的 CSS:

.inner td {
  width: 50%;
}

.inner td input{
  width: 100%;
}

更新:

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

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

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