按钮样式不起作用，不确定该怎么办。

huangapple
go评论170阅读模式
英文:

Button Styling isn't working, not sure what to do

问题

以下是翻译好的部分，不包括代码：

"I'm still new to learning and I am attempting to add a button but it's just staying a white rectangle with a border and my text. I've tried several things to fix it but I'm lost. I am posting the code also, thank you in advance."

"我还是新手，尝试添加一个按钮，但它只是保持着一个白色的矩形，有一个边框和我的文本。我已经尝试了几种方法来修复它，但我陷入困境。我也附上了代码，在此先谢谢您。"

"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"

"添加一个示例，展示它的外观，我使用红色背景颜色来显示我在尝试样式化时看到的内容。"

"I've tried several things, but I am stuck. Not sure where to go next."

"我尝试了几种方法，但我陷入困境。不确定接下来该做什么。"

英文:

I'm still new to learning and I am attempting to add a button but it's just staying a white rectangle with a border and my text. I've tried several things to fix it but I'm lost. I am posting the code also, thank you in advance.
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;
    }

I've tried several things, but I am stuck. Not sure where to go next.

答案1

得分: 0

你的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>
英文:

Your CSS rule needs to target the button itself:

  • Use button to style every button element
  • Use .loggin-in to style any button with this class
  • Use #login button to style any button inside the login div

Here is a demo where I've created three buttons, given each of them a unique class, and then used the class to apply styles to button 2 and button 3.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

&lt;div id=&quot;login&quot;&gt;
    &lt;button class=&quot;loggin-in-1&quot;&gt;Login&lt;/button&gt;
    &lt;button class=&quot;loggin-in-2&quot;&gt;Login&lt;/button&gt;
    &lt;button class=&quot;loggin-in-3&quot;&gt;Login&lt;/button&gt;
&lt;/div&gt;

<!-- end snippet -->

答案2

得分: -1

请注意，我已经删除了代码中的 HTML 实体编码，以便更清晰地阅读。以下是翻译后的内容：

在 <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"> <!--页面样式-->
    <title>Document</title>
</head>

在这个 <head> 标签内，使用 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;
    }
}

希望这对你有所帮助。

英文:

Add an head tag like this

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

and inside this add the link tag and link it to the filename of your css using the href property

and in the css file add your required code

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(&#39;mobile-menu-btn.png&#39;);
        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;
    }

huangapple
  • 本文由 发表于 2023年2月27日 12:56:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/75576882.html
  • button
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定