无法将两个按钮并排对齐

我添加了显示:内联块;并尝试过list-style:none;。但是,没有任何效果。我会很感激。

HTML:

<nav class="navbar navbar-light" style="background-color: white; position: fixed; top: 0; width: 
100%; height: 70px; ">

<a href = "index.html">
<h3 id = "title" style="color: #0099ff;">
Student Sources
</h3>
    </a>

<a href = "stuff.html">
<button id = "stuff" style="margin-right: 900px; display:inline-block;">
Articles/Presentations
</button>
    </a>

    <a href = "aboutus.html">
<button id = "aboutus" style="display:inline-block; float: right;a">
About Us
</button>
    </a>

<!-- Navbar content -->
</nav>

CSS:


.navbar navbar-expand-lg navbar-light bg-light{

background-color: blue;
color: blue;
}

#topics{

}
a,a:hover,a:focus {
text-decoration: none;
}


#title{
transition-duration: .1s;
}
#title:hover{
text-decoration: underline;
text-decoration-color: #FFAE00;

}

#stuff{

padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: white;
color: #0097CF;
border-style: none;
margin-right: 800px;
margin-bottom: 0px; 
color: #0091AE;
transition-duration: .1s;
}

#stuff:hover{


border-style: solid;
border-color:  #FFAE00;
}

#aboutus{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: white;
color: #0097CF;
border-style: none;
margin-right: 800px;
margin-bottom: 0px; 
color: #0091AE;
transition-duration: .1s;
}

#aboutus:hover{

border-style: solid;
border-color:  #FFAE00;
}

如果有人自动说以前已经回答过这个问题,那将非常令人沮丧。我试图寻找答案,但是它不起作用。

je8600 回答:无法将两个按钮并排对齐

您没有显示链接。我希望您连接了引导程序所需的任务。在这里,我修改了您的代码。

HTML:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href = "index.html"><h3 id = "title" style="color: #0099ff;">Student Sources</h3</a>
<a href = "stuff.html">
<button id = "stuff" style=" display:inline-block;">Articles/Presentations</button>
</a>
<a href = "aboutus.html"><button id = "aboutus" style="display:inline-block;">About Us</button>
</a>

<!-- Navbar content -->
</nav>

在这里,我仅删除了margin-right: 900px;float: right部分。

CSS:

.navbar navbar-expand-lg navbar-light bg-light{

background-color: blue;
color: blue;
}

#topics{

}
a,a:hover,a:focus {
text-decoration: none;
}


#title{
transition-duration: .1s;
}
#title:hover{
text-decoration: underline;
text-decoration-color: #FFAE00;

}

#stuff{

padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
background-color: white;
color: #0097CF;
border-style: none;
margin-bottom: 0px; 
color: #0091AE;
transition-duration: .1s;
}

#stuff:hover{


border-style: solid;
border-color:  #FFAE00;
}

在这里,我仅从margin-right: 800px;中删除了#stuff

这是一个有效的提琴。检查它希望对您有帮助。 https://jsfiddle.net/tp43gkvn/2/

,
you know what,wrap does two buttons in one <div></div> element and give the div a class name e.g buttonsWrapper.

html template for that:

<nav class="navbar navbar-light" style="background-color: white; position: fixed; top: 0; width: 
100%; height: 70px; ">

<a href = "index.html">
<h3 id = "title" style="color: #0099ff;">
Student Sources
</h3>
    </a>
<div class=buttonsWrapper>
<button id = "stuff">
<a href = "stuff.html">Articles/Presentations  </a>
</button>

<button id = "aboutus">
<a href = "aboutus.html">About Us</a>
</button>
</div><!--.buttonsWrapper-->

<!-- Navbar content -->
</nav>

in your css,call the buttonsWrapper class and display flex e.g:

.buttonsWrapper{
display:flex;
justify-content:space-around:/*This will space them equally in respect to the parent element width.Then you can use margin to adjust them to your best suit*/
}

Hope this helps!
Next time don't wrap a button inside an anchor tag <a href="#"></a> because,its a bad semantic practice.Rather,wrap an anchor tag in a button element tag.
,

您在按钮上拥有display: inline-block属性,而在a元素上没有。 然后,您的按钮上有margin-right: 800px;,无法将它们并排放置。

您的代码上也有很多重复的属性。将所有内联样式移动到CSS文件。

本文链接:https://www.f2er.com/3142419.html

大家都在问