テキストの右左に線をいれたい。

文章をまたいで、棒を左右に作りたい。

HTML
1<body>
2<header>
3<nav>
4<ul>
5<li>TOP</li>
6<li>ITEMLIST</li>
7<li>BLOG</li>
8
9<li><img src="image/logo.png"></li>
10
11
12<li>BRAND</li>
13<li>SHOP</li>
14<li>CONTACT</li>
15</nav>
16</header>
17
18<p class="s1">LAMIA blog</p>
19
20
21</div>
22 </div>
23</body>

li img{
width:100px;
height:auto;

}

li{
list-style:none;
width:14%;
float:left;
}

nav{
margin:5px;
}

 .s1 {
        display: flex;
        align-items: center;
    }
    .s1:before, .s1:after {
        content: "";
        flex-grow: 1;
        height: 1px; /* 線の太さを変えたいときはここを変える */
        background: #000; /* 線の色を変えたいときはここを変える */
        margin:0 .4em; /* 文字と線の余白用 なくても良い */
    }
.haikei{
background-color:#F2F2F2;
height:400px;
}

table {
    margin-left: auto;
    margin-right: auto;
 margin-bottom:10px;
}

.gray{
background-color:#f2f2f2
}

.more{
margin-top:10px;
text-align:center;
background-color:#F2F2F2;
}

 .s2 {
        display: flex;
        align-items: center;

    }
    .s2:before, .s2:after {
        content: "";
        flex-grow: 1;
        height: 1px; /* 線の太さを変えたいときはここを変える */
        background: #000; /* 線の色を変えたいときはここを変える */
        margin:0 .4em; /* 文字と線の余白用 なくても良い */
    }

.icon{

text-align:center;


}

リンク内容のbrandのページのように、navの下に境界線を作りたい。

行動規範の内容に同意します

回答2件

リンク内容のbrandのページのように、navの下に境界線を作りたい。

リンク先のページをデベロッパーツールで調べてみると、
brand の li要素にクラス(class="active")を追加して、それに対して、
border-bottom で下線を表示しているようですね。

html
1      <ul>
2        <li>TOP</li>
3        <li>ITEMLIST</li>
4        <li>BLOG</li>
5
6        <li><img src="image/logo.png"></li>
7
8
9        <li class="active">BRAND</li>
10        <li>SHOP</li>
11        <li>CONTACT</li>
12      </ul>

css
1li.active {
2  border-bottom: 3px black solid;
3}

追記

質問を勘違いしていたようです。
どうもナビゲーションメニューの下の「LAMIA blog」の左右に罫線を引きたいということのようです。

「LAMIA blog」の表示がうまくいかないのは、li要素に float:left; を設定して横並びにしているのが原因です。そのため「LAMIA blog」がliの右に回り込んでいます。
clear: left;を追加して回り込みを解除すれば現状のCSSで左右の罫線が表示されます。

css
1.s1 {
2  clear: left; /* 追加 */
3  display: flex;
4  align-items: center;
5}

floatで横並びにするのは、後のレイアウトに影響を与えるので現在ではあまり使われません。
今なら、CSS FlexBox で横並びにするのがお勧めです。

nav > ul {
  display: flex;
  align-items:center;
}

li{
  list-style:none;
  width:14%;
  text-align: center;
  padding-bottom: 20px;
/*  float:left; */
}

投稿2020/07/15 03:31

総合スコア34075

2020/07/15 04:19

すみません、いれてみたのですが、見本みたいに下に左右に棒が入らなかったです。

hatena19

2020/07/15 04:38

ひょっとして、ナビゲーションメニューの「Brand」の下の線ではなく、その下の「LAMINA brand」の左右の線のことでしょうか。

newdeal41

2020/07/15 04:51

すみません、そうしたいです。

行動規範の内容に同意します

ベストアンサー

リンク先のヘッダーで変更するとしたら、

#header {
    background: url(../img/base/gray.png) 50% repeat-x;
    background-color: #FFF;}

gray.pngは1pxのもので。
#header #main_nav li a のpadding高さを変えて
#header #main_nav li a a の部分はspanを入れて<li><a><span></span></a></li>
#header li a span {
    background:#fff;
    padding:0 15px;
}
でもって
#header #main_nav ul {
    position: relative;
    top: -26px;
}
#header.scroll_top #main_nav ul {
    top: 0;
}

とかなんとか。

こんな感じでしょうか？

投稿2020/07/16 04:13

編集2020/07/16 04:15