Question

我正在建立一个网站，希望能够按下按钮并下载内容。到目前为止，我已经创建了所有必要的组件（AKA标题，下拉按钮和将下拉的内容）。按钮按预期工作，内容消失，按下时显示。但是，我无法弄清楚的一件事是如何设置标题（在按钮旁边显示'2018'导致下拉。我猜它与显示或位置有关，但我是不知道。

HTML：

    <div class="dropdown">
        <div class="dropdown-bar">
            <div class="grade-title">
                <p id="top-title"">2018</p>
            </div>
            <button onclick="myFunction()" class="dropdown-btn">
        </div>
        <div id="myDropdown" class="grade-section dropdown-content">
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Arielle</li>
                    <li>Software Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Ford</li>
                    <li>Software</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Jack</li>
                    <li>Neural Network Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Rose</li>
                    <li>Software Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Sydney</li>
                    <li>Social Media Lead</li>
                </div>
            </ul>
        </div>
    </div>
</div>
</html>

<script type="text/javascript">
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}
</script>

CSS：

.dropdown-btn {
display: inline;
}

.dropdown-content {
display: none;
position: absolute;
}

.show {
display:block;
}

如果您有解决方案，请告诉我，无论是我的两行还是完全不同的解决方案。关于格式化，正确技术或者更好的做事方式的提示也受到像我这样的新手的高度赞赏。谢谢。

Answer 1

添加此行代码：

.grade-title {
  display: inline-block;
}

注意：您也错过了</button>。

＆＃13;

.dropdown-btn {
display: inline;
}

.dropdown-content {
display: none;
position: absolute;
}

.show {
display:block;
}

.grade-title {
    display: inline-block;
}

＆＃13;

<div class="dropdown">
        <div class="dropdown-bar">
            <div class="grade-title">
                <p id="top-title"">2018</p>
            </div>
            <button onclick="myFunction()" class="dropdown-btn" >button</button>
        </div>
        <div id="myDropdown" class="grade-section dropdown-content">
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Arielle</li>
                    <li>Software Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Ford</li>
                    <li>Software</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Jack</li>
                    <li>Neural Network Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Rose</li>
                    <li>Software Lead</li>
                </div>
            </ul>
            <ul class="team-info">
                <li><img class="team-photo" src="assets/school-photos/.JPG"></li>
                <div class="team-text">
                    <li>Sydney</li>
                    <li>Social Media Lead</li>
                </div>
            </ul>
        </div>
    </div>
</div>

＆＃13;

Answer 2

我建议制作一个导航栏（使用HTML5 <nav>元素）并将所有内容放入其中。查看导航栏上的W3Schools教程here，以及悬停下拉列表中的here。此外，在您的样式中，将所有链接和所需内容中的所有内容并排放置，使其全部display: inline;。

这应该可以解决所有问题，但只要问问是否存在。

您还应该确保<p>规则的选择中包含display: inline;元素 - 默认情况下，这些元素后面会有一个中断行，这可能会导致您的问题。

下拉内容，按钮和标题不会并排

2 个答案: