Question

我的一项任务是创建一个响应式网页。我试图在手机上打开它时遇到了麻烦。我的'li'元素触摸并且看起来很糟糕。

如何阻止每个项目周围的“盒子”触摸？

HTML -

      <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">


<body>
      <center>
         <div id="Menubar">
            <ul>
               <li id="active"><a href="Index.html">Home</a>
               </li>
               <li><a href="Information.html">Services</a>
               </li>
               <li><a href="Contact_us.html">Contact</a>
               </li>
            </ul>
         </div>
      </center>

CSS -

      #Menubar ul {
     padding: .05em 0;
     margin: 0;
     list-style-type: none;
     background-color: #3A3734;
     color: #FFF;
     width: 100%;
     font-family: Oswald;
     font-size: 32pt;
     font-weight: bold;
     text-align: center;
     border-top:solid #8E7861 4px;
     border-bottom:solid #8E7861 4px;
 }
#Menubar ul li { display: inline; }
 li a {
     text-decoration: none;
     margin: 0 0 3px 0;
     background-color: white;
     color: #6AA0CC;
     padding: .1em 1em;
     border: 2px solid #6AA0CC;
 }
 li a:hover {
     background-color: #6AA0CC;
     color: #fff;
     border: 2px solid white;
 }
 .listcenter{
    width:250px;
    margin:0 auto;
    text-align:left;
    }

JSFIDDLE

Answer 1

将以下代码添加到li a选择器，而不是您应用的其他样式。

li a {display:inline-block;}

检查更新后的JSFIDDLE

重要的是，对于响应式网页，您也应该使用媒体查询。

阻止li元素轮廓触摸

1 个答案: