我希望边框围绕文本，但它不会出现。我做错了什么？也许我必须确定位置？
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #282A2E;
}
menu {
color: white;
font-size: 20px;
}
#menu__item {
border-color: white;
border-style: solid;
}<div style="overflow: hidden;">
<menu>
<div class="menu__item">
text
</div>
</menu>
</div>这应该可以做到：
<html>
<head>
<meta charset="UTF-8"">
<style>
html { width:100%; height:100%; margin:0; padding:0; }
body { width:100%; height:100%; margin:0; padding:0; background-color: #282A2E; }
menu {
color:white;
font-size: 20px;
}
.menu_item {
border: 1px solid white;
width:fit-content;
}
</style>
</head>
<body>
<div style="overflow: hidden;">
<menu>
<div class="menu_item">
text
</div>
</menu>
</div>
</body>
</html>
您错误地定义了类menu_item。#表示id，而不是类。
结果：
<html>
<head>
<meta charset="UTF-8"">
<style>
html { width:100%; height:100%; margin:0; padding:0; }
body { width:100%; height:100%; margin:0; padding:0; background-color: #282A2E; }
menu {
color:white;
font-size: 20px;
}
.menu_item {
border: 1px solid white;
width:fit-content;
}
</style>
</head>
<body>
<div style="overflow: hidden;">
<menu>
<div class="menu_item">
text
</div>
</menu>
</div>
</body>
</html>我进一步添加了width:fit-content;，以确保边框仅围绕文本，而不是整个屏幕宽度。
如果你想让它看起来更好，你也可以添加一些填充物，比如：
<html>
<head>
<meta charset="UTF-8"">
<style>
html { width:100%; height:100%; margin:0; padding:0; }
body { width:100%; height:100%; margin:0; padding:0; background-color: #282A2E; }
menu {
color:white;
font-size: 20px;
}
.menu_item {
border: 1px solid white;
width:fit-content;
padding:1em;
}
</style>
</head>
<body>
<div style="overflow: hidden;">
<menu>
<div class="menu_item">
text
</div>
</menu>
</div>
</body>
</html>注意：使用border-color是非常不必要的。你可以用border: <width> <design> <color>来做。例如，border: 1px solid white
使用#menu__item表示ID，而不是类。要编辑menu__item类的css，请使用：
.menu__item {
border-color: white;
border-style: solid;
}
在CSS中使用ID(#menu__item(，但在HTML中使用类。改变其中一个以使其工作。
- 您需要设置边框的宽度
- 您应该将
#menu__item更改为.menu__item，因为menu__item是类名
html { width:100%; height:100%; margin:0; padding:0; }
body { width:100%; height:100%; margin:0; padding:0; background-color: #282A2E; }
menu {
color:white;
font-size: 20px;
}
.menu__item {
border: 1px solid white;
display: inline-block;
}<div style="overflow: hidden;">
<menu>
<div class="menu__item">
text
</div>
</menu>
</div>