0

私は1つの基本的な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 クラスを使用することをお勧めします Login、forgtpass、メニュー ドロップダウン、または常に elem を同じ行に配置したい場合は 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 に答える