html - css 无法在移动浏览器上正确显示

Question

这是 my page

我的上述网页的 CSS 在桌面浏览器上看起来很好，但是在移动浏览器上，食物成分周围的边框显示不正确:

相关 CSS:

.page_title {
  text-transform:capitalize;
  text-align:center;
}
.food_list {
  text-transform:capitalize;
}

.listing {
  text-indent:10px;
  margin-right:1500px;
  margin-left:10px;
  color:black;
  background-color:lightblue;
  border-radius: 10px 20px 30px 40px;
  -moz-border-radius: 10px 20px 30px 40px;
  -webkit-border-radius: 10px 20px 30px 40px;
  -khtml-border-radius: 10px 20px 30px 40px;
}

.ul {
  list-style:none;
}

p {
  text-transform:none;
}

p span {
  display:block;
}

Answer 1

试试这个:

jsFiddle

.listing {
    text-indent: 10px;
    margin-left: 10px;
    color: black;
    float: left;
    background-color: lightblue;
    border-radius: 10px 20px 30px 40px;
    -moz-border-radius: 10px 20px 30px 40px;
    -webkit-border-radius: 10px 20px 30px 40px;
    -khtml-border-radius: 10px 20px 30px 40px;
}

h2{
    clear:both;
}