9

私は4つのタグを持っていaます。各 CSS のすべてが機能します。私の電話のボタンのサイズを完全に変更します。私が持っている唯一の問題は、ログイン/登録ボタン、ボタン内のテキストカット、および表示されるのはログイン/登録だけです。

私が思い出すwhite-space: normalのはこれを行う方法ですが、多分私は間違っています。

@media only screen and (max-device-width: 480px) {
  .newsButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: left;
  }
  
  .venueButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: right;
  }
  
  .learnButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: left;
  }
  
  .loginButton {
    width: 49%;
    height: 140px;
    white-space: normal;
    float: right;
  }
}
<a href="menu.php" class="newsButton" data-role="button" data-theme="e">News</a>
<a href="venue.php" class="venueButton" data-role="button" data-theme="e">Venue Hire</a>
<a href="learn.php" class="learnButton" data-role="button" data-theme="e">Learn</a>
<a href="login.php" class="loginButton" data-role="button" data-theme="e">Login/Register</a>

4

3 に答える 3

0

を使用していると思いますword-wrap: break-word;。また、height制限を削除します。単語が新しい行に折り返されるときに、奇妙なテキスト オーバーフローの問題が発生するだけです。

@media only screen and (max-device-width: 480px) {
.newsButton{
    width:49%;
    word-wrap:break-word;
    float: left;
}

.venueButton{
    width:49%;
    word-wrap:break-word;
    float: right;
}

.learnButton{
    width:49%;
    word-wrap:break-word;
    float: left;
}

.loginButton{
    width:49%;
    word-wrap:break-word;
    float: right;
}
}

また、クラスを本当に奇妙な方法で使用しているようです。idこれらのクラスを として割り当て、すべてのボタンに 1 つのクラスを与えるべきではありませんbuttonか? HTML

<a href="menu.php" id="newsButton" class="button" data-role="button" data-theme="e">News</a>
<a href="venue.php" id="venueButton" class="button" data-role="button" data-theme="e">Venue Hire</a>
<a href="learn.php" id="learnButton" class="button" data-role="button" data-theme="e">Learn</a>
<a href="login.php" id="loginButton" class="button" data-role="button" data-theme="e">Login/Register</a>

CSS:

@media only screen and (max-device-width: 480px) {
    .button{
        width:49%;
        word-wrap:break-word;
        float: left;
    }
}
于 2013-10-11T03:41:30.073 に答える