![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
教えてください。
横並びのナビボタンを作成したのですが、ボタンが隣接する箇所だけにボーダーを設定することは可能なのでしょうか。
左だけ指定しますと、右端のボタンの右の線がなく、左端のボタンには左に線がでて、バランスが悪いです。
左右に指定すれば、合間だけ線が太くなります。
かつ、現在ページ(リンクなし)ボタンは、下の線は設定なしで、他ページへのボタン(リンクのあるページへのナビボタン)は下部に線を入れてます。
以下は「左」のみの指定、hover時の下部線を設定しています。
よろしくご指導お願い申し上げます。
ul#lc_navi{
margin: 0px;
font-size: 12px;
font-weight: bold;
color: #646464;
list-style-type:none;
width:754;
}
ul#lc_navi li{
display:block;
float: left;
width: 150px;
height:22px;
list-style-type: none;
text-align: center;
font-weight: bold;
line-height:20px;
color: #646464;
background-color:#FFFFFF;
}
ul#lc_navi a{
width:150px;
height:22px;
text-decoration:none;
color: #646464;
background-color:#E9C3F6;
border-bottom: solid;
border-width:1px;
}
ul#lc_navi a:hover{
background-position:top center;
text-decoration:underline;
color: #646464;
background-color:#E1F9FA;
}
No.1ベストアンサー
- 回答日時:
左にborderを指定されているとのことですが、ソース上には無いですよね?
とりあえずaの左に指定されていると仮定してお答えします。
(間違いだったらごめんないさ;;)
単純に右端のaにクラス指定(例:class="end")をして、
ul#lc_navi a への指定の後に、
ul#lc_navi a.end{
border-right:1px solid #333;
}
のように上書きしてはいかがでしょうか?
動的なメニューですと、リストの最後であることを判別する必要はありますが・・・
お返事をありがとうございます。ご連絡が遅くなり、申し訳ございませんでした。
中途半端なソースへ、ご丁寧にご指導いただき、感謝しております。上書きで修正をかけていくことを、自分で試さず、人の手を借りてしまい、申し訳ありません。大変参考になりました。勉強に励みます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSS、width100%でもできる余白
-
widthやheightの数値に単位(px...
-
書籍を見つつサイト造りの練習...
-
CSSで指定した背景画像にリンク...
-
<li>の先頭に出るスペースの埋...
-
safariだけ、cssが効きません!
-
FFにおけるDIVタグ間の隙間につ...
-
ウインドウを小さくするとbody...
-
CSSがなぜかfont-sizeだけ効か...
-
CSSでborderの指定を解除する記...
-
インラインフレーム内の表示位...
-
CSSでボックスのheightが0になる
-
画像イメージの上下左右、欲し...
-
Firefoxで一番下のstickyが上に...
-
ライトボックスでスクロールバー
-
CSSで背景画像を一番下にもって...
-
HTMLで文字が重なって表示されます
-
定義リストに下線をつけたいと...
-
表示倍率を変えるとレイアウト...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報