0

ポップアップ ボックスがあり、左側には通常のログイン フォーム (メール/パスワード)、右側には FB ログイン ボタンがあります。インライン ブロック表示で div を使用しました (主に、通常のログイン フォームと FB ボタンの間の境界にしたいため)。問題は、何かが良くないと感じたことです (私は CSS の経験がまったくありません)、別のラップトップ (画面が少し小さい) でどのように見えるかを試してみることにしましたが、完全に惨事です。めちゃめちゃ。スタイリングのリファクタリングを手伝ってください。その場合、テーブルのようにする必要がありますか？

.sign_in {
    display: none;
    position: fixed;
    top: 30%;
    left: 28%;
    border-style: solid;
    border-width: 3px;
    border-color: #c1ffc6;
    background: #fff;
    padding: 2%;
    width: 40%;
    height: 25%;
    font-family: Arial, sans-serif;
    z-index: 9999999;
    font-size: 14px;


}
.signs_form{
    margin-top: 5%;
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
    display: inline-block;
    border-right-style: solid;
    padding-right: 10%;
    border-width: 1px;
    border-color: #c1ffc6;


}
.fb_sign {

    display: inline-block;
    vertical-align: 100%;
    margin-left: 10%;


}
#sign_in_fb {
    vertical-align: 100%;

}

拡張された ruby​​ html ファイルです。

<div class = "sign_in" >
<div id="close"> <%= link_to('X','#', :id=>'close_sign_in_popup', :remote=>true)%> </div>
<%= form_tag sessions_path, :class=>'signs_form', :remote=>true do %>
    #so on
<span class="fb_sign">
</span>
</div>
4

1 に答える 1

2

メディアクエリを使用して、デバイスの幅に応じてさまざまなスタイルを取得できます

@media (min-width: 768px) and (max-width: 979px) {

/*your css for these devices*/

}

@media (max-width: 767px) {

  /*your css for these devices*/

}
于 2013-05-03T14:19:16.530 に答える