我正在建立一个移动网站并遇到一个奇怪的问题。横向滚动页面。不仅如此,标题似乎是固定的,内容似乎是横向滚动的。如果您查看此页面,问题将得到最好的理解
我尝试为正文、#search-page、#search-controls 设置最大、最小宽度。似乎没有任何效果。
#search-page #header.ui-bar-a{
background: #fff;
border: none;
border-bottom: 3px solid #5D2B44;
padding:0 10px 4px 0;
margin:0;
height:63px;
text-shadow: none;
}
#search-controls {
height: 63px;
padding: 5px;
}
/*#search-controls .br-right {
border-right: 1px solid #ccc;
}
*/
.search-field {
width: 100%;
overflow: hidden;
height: 26px;
}
.search-field .ui-btn-inner{
font-size: 12px!important;
font-weight:bold!important;
}
.filter, .ratings, .name {
height: 24px;
margin: 0 auto;
font-size: 12px;
line-height: 12px;
text-transform: uppercase;
text-shadow: none;
min-width: 55px;
padding: 0 2px;
}
.filter{float: left;}
.ratings, .name, .sort-by{float: right;}
.ratings{margin-right: 1px;}
.sort-by {
font-size: 16px;
margin: 6px 20px 0 0;
}
/* Stacked List */
.ui-content{overflow-x: visible;}
.ui-content .ui-listview {
margin: -10px;
}
.ui-listview li{
padding: 0;
}
.ui-li-static.ui-li {
padding: 0 15px 0 0;
margin: 0 0 -10px 7px;
}
.ui-li-static.ui-li-has-thumb {
min-height: 85px;
padding-left: 105px;
}
.ui-li-thumb{
max-height: 85px;
max-width: 100%;
}
.ui-li-heading{
color: #5D2B44;
font-size: 18px;
font-weight: bold;
line-height: 18px;
padding-top: 10px;
margin: 10px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ui-li-heading .ui-link, .ui-li-heading .ui-link:visited, .ui-li-heading .ui-link:active{
color: #5D2B44;
text-decoration: none;
}
.ui-li-desc.cusine {
font-size: 12px;
font-weight: normal;
display: block;
line-height: 12px;
padding: 1px 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.ui-li-desc.cusine {
color: #999;
margin: -.9em 0 0;
}
.ui-li-desc.rating {
color: #666;
margin: -.9em 0 0;
}
.ui-li-desc.location {
color: #424242;
margin: -.2em 0 0;
}
.result {
height: 85px;
border-bottom: 1px solid #5D2B44;
display: block;
overflow: hidden;
}
.result img {
width: 95px;
height: 85px;
margin: 0 10px 0 0;
float: left;
}
.result .info {
padding: 12px 10px 0 0;
float: left;
text-shadow: none;
max-width: 385px;
height: 75px;
}
.result span {
display: block;
}
.result .restaurant {
font-size: 18px;
line-height: 18px;
font-weight: bold;
color: #5D2B44;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.result .cusine {
font-size: 12px;
line-height: 12px;
color: #999;
padding: 1px 0;
}
.result .stars {
height: 12px;
padding-top: 0px;
}
.result .location {
font-size: 12px;
line-height: 12px;
color: #424242;
}
.rates .rating-number{
line-height: 12px;
}