css 按钮样式不起作用，不确定该怎么做

ycggw6v2 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(113)

我仍然是新的学习，我试图添加一个按钮，但它只是停留在一个白色的矩形与边框和我的文字。我已经尝试了几件事来修复它，但我迷路了。我张贴的代码也，提前谢谢你。Adding an example of what it looks like, I have a red bg color to show what I am seeing when trying to style it

<header>
    
    <div class="logo">Swift Records</div>
    
    <button class="mobile-nav-toggle" aria-controls="primary-nav" aria-expanded="false">
        <span class="sr-only">Menu</span> </button>
    
    <nav>   
        <ul class="navbar" id="primary-nav" data-visible="false">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Browse</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    
    <div id="login">
        <button class="loggin-in">LOGIN</button>
    </div>
    
</header>

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.navbar {
    display: flex;
    gap: var(--gap, 5rem);
    list-style: none;
    margin: 0;
    
}

.navbar a {
    text-decoration: none;
    background-color: aqua;
    
}

.mobile-nav-toggle {
    display: none;
}
 
.sr-only {
    display: none;
}

@media (max-width: 35em) {
    .navbar {
        position: fixed;
        inset: 0 0 0 20%;
        background-color: #facfbce6;
        flex-direction: column;
        padding: min(30vh, 10rem);
        backdrop-filter: blur(0.5rem);
        gap:var(--gap, 2rem);
        font-size: 20px;
        z-index: 1000;
        transform: translateX(100%);
    }

    
    .mobile-nav-toggle {
        position: absolute;
        display: block;
        z-index: 9999;
        width: 2rem;
        aspect-ratio: 1;
        top: 2rem;
        right: 2rem;
        background-color: blue;
        background: url('mobile-menu-btn.png');
        background-repeat: no-repeat;
        border: 0;
    }
    
    
}

.logo {
    text-decoration: none;
    margin-top: 2rem;
    
}

#login {
        padding-right: 10px;
        padding-top: 2px;
        margin-top: 2rem;
        background-color: red;
    }

我试了好几种方法，但都卡住了。不知道下一步该怎么办。

css

来源：https://stackoverflow.com/questions/75576882/button-styling-isnt-working-not-sure-what-to-do

2条答案

按热度按时间

6uxekuva1#

添加一个head标签，如下所示

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    **<link rel="stylesheet" href="index.css">** <!--Styling the page-->
    <title>Document</title>
</head>

并在其中添加link标记，并使用href属性将其链接到css的文件名
并在css文件中添加所需的代码

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.navbar {
    display: flex;
    gap: var(--gap, 5rem);
    list-style: none;
    margin: 0;
    
}

.navbar a {
    text-decoration: none;
    background-color: aqua;
    
}

.mobile-nav-toggle {
    display: none;
}
 
.sr-only {
    display: none;
}

@media (max-width: 35em) {
    .navbar {
        position: fixed;
        inset: 0 0 0 20%;
        background-color: #facfbce6;
        flex-direction: column;
        padding: min(30vh, 10rem);
        backdrop-filter: blur(0.5rem);
        gap:var(--gap, 2rem);
        font-size: 20px;
        z-index: 1000;
        transform: translateX(100%);
    }

    
    .mobile-nav-toggle {
        position: absolute;
        display: block;
        z-index: 9999;
        width: 2rem;
        aspect-ratio: 1;
        top: 2rem;
        right: 2rem;
        background-color: blue;
        background: url('mobile-menu-btn.png');
        background-repeat: no-repeat;
        border: 0;
    }
    
    
}

.logo {
    text-decoration: none;
    margin-top: 2rem;
    
}

#login {
        padding-right: 10px;
        padding-top: 2px;
        margin-top: 2rem;
        background-color: red;
    }

赞(0）回复(0）举报 2023-03-05

jjjwad0x2#

您的CSS规则需要以按钮本身为目标：

使用button设置每个按钮元素的样式
使用.loggin-in可使用此类设置任何按钮的样式
使用#login button设置login div内任何按钮的样式

下面是一个演示，我创建了三个按钮，为每个按钮指定了一个唯一的类，然后使用该类将样式应用于按钮2和按钮3。

.loggin-in-2 {
  background-color: pink;
}
.loggin-in-3 {
  background-color: orange;
  border: 0;
  padding: 0.5em 1em;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
}

<div id="login">
    <button class="loggin-in-1">Login</button>
    <button class="loggin-in-2">Login</button>
    <button class="loggin-in-3">Login</button>
</div>

赞(0）回复(0）举报 2023-03-05

我来回答

css 按钮样式不起作用，不确定该怎么做

2条答案

相关问题

热门标签

最新问答