我有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>
我相信你使用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
并给所有按钮一个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;
}
}
问题是:a
标签默认为display: inline
。 word-wrap: break-word
不适用于任何不是display: inline-block
或display: block
的元素(参见this)。
因此,你必须像你的按钮一样
.button {
// ...
display: inline-block;
word-wrap: break-word;
// ...
}
希望这可以帮助。