html Flexbox的を使ったブロック型ナビゲーションメニュー

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html Flexbox的を使ったブロック型ナビゲーションメニュー相关的知识，希望对你有一定的参考价值。

flexboxを使ったブロック型ナビゲーションメニュー

- メニューのフォントに游明朝を使うとieで縦がずれる
- 画像を使ってもOK

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  .wrapper {
    border-top: 3px solid #093A75;
    border-bottom: solid #ccc 1px;
    margin-top: 50px;
    background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
    background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  }
  
  .globalMenu {
    width: 90%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    justify-content: -ms-space-around;
    justify-content: -webkit-space-around;
    justify-content: space-around;
    margin: 0 auto;
    padding: 0;
    align-items: center;
  }
  
  li {
    list-style: none;
    flex: 1 0 auto;
    -ms-flex-grow: 1;
    -webkit-flex-grow: 1;
    text-align: center;
    border-left: solid #ccc 1px;
    display: block;
  }
  
  li:last-child {
    border-right: solid #ccc 1px;
  }
  
  li a {
    display: block;
    width: 100%;
    text-decoration: none;
    padding: 0.85rem 0;
    font-weight: 500;
  }
  
  li a:hover {
    color: #fff;
    background-image: linear-gradient(to bottom, #BBCCE1, #4A77AD);
  }
  </style>
</head>

<body>
  <div class="wrapper">
    <ul class="globalMenu">
      <li><a href="">ホーム</a></li>
      <li><a href="">会社概要</a></li>
      <li><a href="">採用情報</a></li>
      <li><a href="">事業内容</a></li>
      <li><a href="">お問い合わせ</a></li>
    </ul>
  </div>
</body>

</html>

以上是关于html Flexbox的を使ったブロック型ナビゲーションメニュー的主要内容，如果未能解决你的问题，请参考以下文章

ruby 渡したブロックの处理内容にかかわらず，最终的にレシーバを返すメソッド...水龙头

python はてなブログAtomPub APIを使った简易投稿クライアントアプリ（http://ottati.hatenablog.com/entry/2013/09/06/190925の解说用）