2

モバイル Web サイトを作成していて、メニュー バーにいくつかの変更を加えるのに苦労しています。私はこの分野の専門家ではないので、お役に立てれば幸いです。

以下はメニューバーのコードです。

CSS

<style type="text/css">
    * { padding: 0; margin: 3; }
    body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
    ul { list-style: none; }
    ul li {
float: left;
padding: 1.5px;
position: relative;
margin: auto;}
ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
    ul a:hover {background-color:#5A87B4; }

HTML

<div> 
<ul>
<li>
  <div align="center"><a href="../Software.html" >Software</a>
    </div>
</li>
  <li>
    <div align="center"><a href="../Products.html">Products</a></div>
  </li>
<li>
<a href="../Order Online.html">FAQ</a></li>
</ul>

これは基本的なメニュー バーです。これを中央に調整し、水平線を使用して各ボタンを分割し、これらすべてが中央に配置され、モバイル画面に 100% 収まるようにしたいと考えています。あなたのすべての助けは大歓迎です

編集：各ボタンの後にスペースがあるようなものですが、代わりに水平線があります

編集: 幅を 75% から 80px に変更しました。識別に他の問題があったため、コードの div ID も変更したことに注意してください。:) これがあなたを混乱させないことを願っています

#menubar * { padding: 0; margin: 2; }
    body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}

#menubar ul{text-align:center;}

#menubar ul li { display:inline-block; padding: 2px;  position: relative;  }

#menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
4

3 に答える 3

2

私はあなたのcssコードに以下の行を追加しました。これがあなたの望むものであることを願っています。

ul{
   display:inline-block;
   overflow:hidden;
}

div{
  text-align:center;
}

li:after{
   border-right:50px solid black;
   content:"";
   position:relative;
   left:10px;
   top:-27px;  
   z-index:-1;
   display:block;
   height:1px;
}

li:last-child{
   margin-right:-14px
}

ワーキングフィドル

于 2013-03-18T12:39:42.830 に答える
0

今すぐ削除 float:leftしてli追加し、 ulタグdisplay:inline-block;に追加 text-align centerしてください

このように

ul{
text-align:center;
}

ul li{
display:inline-block;
vertical-align:top;
float:left; // remove this line
}

デモ

于 2013-03-18T12:32:35.540 に答える
0

現在の css から on を削除float:left;しliて追加するtext-align:center;と、次のように動作するはずです。

ul li {
    text-align: center;
    padding: 1.5px;
    position: relative;
    margin: auto;
}

これは動作中のJSFiddleです。

アップデート

その場合は、CSS を次のように変更できます。

ul li{
    text-align:center;
    display:inline-block;
}

ul li:before {
    content: " - ";
}

ul li:first-child:before {
    content: none;
}

ここに作業中のJSFiddleがあります

于 2013-03-18T12:24:21.173 に答える