Html 将图元放置在固定图元内

我希望两个td的长度相同，并保持在红色边界内。但是文本框超出了它的范围

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

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

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%;
}

<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>

HTML:

.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%;
}

<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>

用户名
密码

将此添加到CSS中：

.inner td {
  width: 50%;
}

.inner td input{
  width: 100%;
}

UDPATE:

.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%;
}

<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>

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

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

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

---

基本上缺少的是输入元素的宽度。 我将如何做（进一步改进）：

CSS:

HTML:

用户名
密码

我改变的是：

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

---

首先为它创建一把小提琴你是说

位置：相对而不是
显示：相对？问题不会出现在小提琴上。但是你可以看到这张照片是怎样的。