如何以百分比调整HTML组件

Question

我正在创建一个基本的html页面，我是新手。如下面的屏幕截图所示。

如果是100％宽度，它会显示我想要的对象。当我最小化它时，按钮文本无法正确显示。这是最小化窗口的屏幕截图，这样你们都可以清楚地知道我到底想要什么。

HTML code：

 <tr>
      <td><a href="Patientscreen.html">
        <div class="logn">Login</div>
      </a></td>
      <td width="39%" nowrap="nowrap"  ><a href="">
        <div class="frgt-pass"><span class="frgt-pass-txt"> Forgot Password</span></div>
      </a></td>
      <td width="41%" ><div class="Menu-dropdown" onclick="show_menu()" id="dropdown_button"> Menu
        <div id="dropdown_menu" class="hidden_menu">
                <li><a href="">About</a></li>
          <li><a href="">Ping Server</a></li>
          <li><a href="">Change server</a></li>
        </div>
      </div></td>
    </tr>

CSS：

.logn-txt {
    font-family:Arial !important;
    color:#FFFFFF;
    font-size:2em;
    color:#aaaaaa;
    padding-right:2%;
}

.txt-box{
    background-image:url(../images/txt-box-BG%20.png);
    background-repeat:repeat-x;
    width:90%;
    height:58px;
    border:none;
    font-family:Arial !important;
    color:#000000;
    font-size:1.5em;
    padding-right:2%;
}

.logn-heading {
    font-family:Arial !important;
    font-size:32px;
    color:#FFFFFF;
    font-weight:bold;
    line-height:58px;
    margin-left:40%;
    line-height:88px;
    position:absolute;
}

.tbl {
    margin:auto; 
    margin-top:15%;
}

.frgt-pass {
    background-color:#FFFFFF;
    width:90%;
    height:4.5em;
    position:relative;
    white-space:nowrap;
}

.frgt-pass-txt {
    font-family:Arial !important;
    color:#324f85;
    font-size:1.8em;
    font-weight:bold;
    line-height:72px;
    text-align:center;
    margin-left:10%;
}

.logn {
    background-color:#FFFFFF;
    width:70%;
    height:72px;
    font-family:Arial !important;
    color:#324f85;
    font-size:178%;
    font-weight:bold;
    line-height:72px;
    text-align:center;
    position:relative;
    float:right;
    margin-right:15%;

}

请帮帮我。

Answer 1

我建议只是省略表格而是使用display：inline-block for classes Login，forgtpass和menu dropdown或display：table-cell如果你想要总是elem将保持在同一行。

 .ExampleClass
{
    border: 2px solid #CFE4AC;
    box-shadow: 0 0 10px #CFE4AC inset;
    cursor: pointer;
    display: inline-block;
    height: 6em;
    margin: 0.5em;
    overflow: auto;
    padding: 0 0 0 0.5em;
    text-align: left;
    vertical-align: top;
    width: 30%;
    font-size: small;
}