0

我正在创建一个基本的 html 页面，我对此并不陌生。如以下屏幕截图所示。

在此处输入图像描述

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

在此处输入图像描述

HTML 代码：

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

}

请帮帮我。

4

1 回答 1

0

我建议只省略表格，而是使用 display: inline-block 类登录，forgtpass 和菜单下拉菜单或 display:table-cell 如果您希望元素始终保持在同一行。

 .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;
}
于 2012-11-09T07:51:47.613 回答