※ ChatGPTを利用し、要約された質問です(原文:スタイルシート・・・borderが適用されない)
スタイルシートでborderが適用されない
このQ&Aのポイント
横並びのメニューを作っていますが、なぜかborderが適用されません。多分余計な記述があるためだと思いますが、分からなくなってしまいました。どなたか助けてください。
borderが適用されない問題に直面しています。横並びのメニューにborderを適用しようとしているのですが、うまくいきません。問題の原因がわからなくなってしまい、困っています。助けていただけると幸いです。
borderが反映されない横並びのメニューを作成しています。おそらく余計な記述が原因ではないかと考えていますが、具体的な解決策が見つかりません。どなたかお知恵をお貸しください。
横並びのメニューを作っていますがなぜかborderが適用されません。
多分余計な記述があるためだと思いますが分からなくなってしまいました。どなたか助けて下さい。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>テスト</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header-menu">
<ul class="sample">
<li><A href="#">メニュー1</A></li>
<li><A href="#">メニュー2</A></li>
<li><A href="#">メニュー3</A></li>
<li><A href="#">メニュー4</A></li>
</ul>
</div>
</body>
</html>
.header-menu {
width: 400px;
overflow: hidden;
}
ul.sample{
margin-top:20px;
font-size:12px;
padding-left:0;
margin-left:0;
}
ul.sample li{
display: inline;
}
ul.sample li a{
width:85px;
text-decoration:none;
color: #fff;
background-color: #FF7F50;
padding:3px 0 3px 0;
margin-right:7px;
width:85px;
float:left;
border-width:1px;
border-color:#CCCCCC;
text-align: center;
}
ul.sample li a :hover {
background:none;
}
お礼
anwarさん 早速、ありがとうございます。 border-style:solid; 初歩的なミスでした。 助かりました。