こんにちは。今仕事でグローバルナビ部分を作成しているのですが、afterでくっつけた右向き矢印の位置がブラウザごと(同じブラウザでもパソコンごとに違う)に違うので困っています。
おそらく、ブラウザごとに文のベースラインやフォントサイズの解釈に若干の違いがあり、aタグを親としていると開始位置がずれるのが原因ではないかと思っています。
下記のサイトを参考にいじってみましたが、いまいちうまくいきません。
https://code.i-harness.com/ja-jp/q/1a957a0
どうにか、「文字にあわせて真ん中に」配置させることはできませんでしょうか?
html
1<nav> 2 <ul class="globalnav"> 3 <li> 4 <span>CONTENTS</span> 5 </li> 6 <li> 7 <a href="#cont01">aaaaa</a> 8 </li> 9 <li> 10 <a href="#cont02">aaaaa</a> 11 </li> 12 <li> 13 <a href="#cont03">aaaaa</a> 14 </li> 15 </ul> 16 </nav>
css
1html{ 2 font-size: 14px; 3 font-family: "Hiragino Kaku Gothic ProN","Helvetica Neue", "helvetica", "Noto Sans Japanese", "YuGothic", "游ゴシック", "游ゴシック体", "Hiragino Kaku Gothic Pro", "Verdana", Meiryo, Osaka, "MS PGothic", sans-serif; 4} 5/*--navstart--*/ 6nav{ 7border-bottom: 1px solid #dedede; 8border-top: 1px solid #dedede; 9margin-bottom: 60px; 10} 11nav ul{ 12 width: 960px; 13 margin: 0 auto; 14 display: -webkit-flex; 15 display: -ms-flex; 16 display: flex; 17 padding: 0; 18} 19nav ul li{ 20 font-size: 16px; 21 padding:22px 20px 22px 40px; 22 -webkit-box-sizing: border-box; 23 box-sizing: border-box; 24 margin-left: 10px; 25 border-left: 1px solid #dedede; 26} 27nav ul li:first-child{ 28 margin-left: 0; 29 border-left: 0; 30 padding-left: 0; 31} 32nav ul li a{ 33 color: #454545; 34 text-decoration: none; 35 position: relative; 36 vertical-align: middle; 37} 38nav ul li a:link{ 39 color: #454545; 40 text-decoration: none; 41} 42nav ul li a:visited{ 43 color: #454545; 44 text-decoration: none; 45} 46nav ul li a:before{ 47 position: absolute; 48 content: ''; 49 border-left: 8px solid #c01920 ; 50 border-right :5px solid transparent; 51 border-bottom :5px solid transparent; 52 border-top :5px solid transparent; 53 height: 0; 54 width: 0; 55 top: 4.5px; 56 left: -1rem; 57 display: block; 58} 59nav ul li span{ 60 vertical-align: middle; 61} 62nav ul li:first-child a:before{ 63 border: 0; 64} 65/*--navend--*/
reset.css
1/* http://meyerweb.com/eric/tools/css/reset/ 2 v2.0 | 20110126 3 License: none (public domain) 4*/ 5 6html, body, div, span, applet, object, iframe, 7h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8a, abbr, acronym, address, big, cite, code, 9del, dfn, em, img, ins, kbd, q, s, samp, 10small, strike, strong, sub, sup, tt, var, 11b, u, i, center, 12dl, dt, dd, ol, ul, li, 13fieldset, form, label, legend, 14table, caption, tbody, tfoot, thead, tr, th, td, 15article, aside, canvas, details, embed, 16figure, figcaption, footer, header, hgroup, 17menu, nav, output, ruby, section, summary, 18time, mark, audio, video { 19 margin: 0; 20 padding: 0; 21 border: 0; 22 font-size: 100%; 23 font: inherit; 24 vertical-align: baseline; 25} 26/* HTML5 display-role reset for older browsers */ 27article, aside, details, figcaption, figure, 28footer, header, hgroup, menu, nav, section { 29 display: block; 30} 31body { 32 line-height: 1; 33} 34ol, ul { 35 list-style: none; 36} 37blockquote, q { 38 quotes: none; 39} 40blockquote:before, blockquote:after, 41q:before, q:after { 42 content: ''; 43 content: none; 44} 45table { 46 border-collapse: collapse; 47 border-spacing: 0; 48} 49
すみませんが、詳しい方、よろしくお願いいたします。
追記:ちなみに、今揃えたいのは「縦方向」です。横マージンはとりあえずOKをもらっています。
回答1件
あなたの回答
tips
プレビュー