内联放置不同的按钮和下拉菜单

Question

我正在设计一个看起来像MS Office Word的网站。应该有一些按钮（斜体，粗体等）和两个下拉菜单（大小和字体）。现在的问题是，无论我做什么，都无法在“字体”旁边显示“大小”。由于字体下拉列表中的元素，它紧随其后。当我在字体之后添加<br>时，很清楚为什么“ size”位于“ fonts”下。但是，当我删除<br>时，存在样式问题，最后一个字体和上一个字体之间有一个空格，并且当我将鼠标悬停在“字体”按钮上时，“ size”仅在字体旁边。 以下是一些更清晰的图像：
与<br>一起使用，而又没有悬停
与<br>一起悬停在上
没有<br>的同时不悬停
在悬停时没有<br>（该空间确实打扰了我，因为它破坏了 hover 函数） 所以这是我的代码：html

<span id="toolbar">
 <button class="fontweight" onclick="bold()"><b>B</b></button>
 <button class="fontweight" onclick="italic()"><i>I</i></button>
 <button class="fontweight" onclick="underline()"><u>U</u></button>
 <span class="dropdownfonts" onmouseover="drop()" onmouseout="hide()" >
    <button id="dropdown" onmouseover="drop()" >Fonts</button><br>
    <span id="fonts">
    <button class="fonts"  onclick="change(this.innerHTML)">Arial</button><br>
    <button class="fonts"  onclick="change(this.innerHTML)">Calibri</button><br>
    <button class="fonts"  onclick="change(this.innerHTML)">Century Gothic</button><br>
    <button class="fonts"  onclick="change(this.innerHTML)">Comic Sans</button><br>
    <button class="fonts"  onclick="change(this.innerHTML)">Consolas</button><br>
    <button class="fonts"  onclick="change(this.innerHTML)">Courier</button><br>
    <button class="fonts"  onclick="change(this.innerHTML)">MV Boli</button><br>
    <button class="fonts"  onclick="change(this.innerHTML)">Times New Roman</button>
    </span> 
 </span>
 <span class="dropdownfonts" onmouseover="dropsize()" onmouseout="hidesize()" >
    <button id="size">Size</button><br>
    <span id="sizes">
    <button class="sizes"  onclick="changesize(this.innerHTML)">10</button><br>
    <button class="sizes"  onclick="changesize(this.innerHTML)">12</button><br>
    <button class="sizes"  onclick="changesize(this.innerHTML)">14</button><br>
    <button class="sizes"  onclick="changesize(this.innerHTML)">16</button><br>
    <button class="sizes"  onclick="changesize(this.innerHTML)">18</button><br>
    <button class="sizes"  onclick="changesize(this.innerHTML)">20</button><br>
    <button class="sizes"  onclick="changesize(this.innerHTML)">22</button><br>
    <button class="sizes"  onclick="changesize(this.innerHTML)">24</button><br>
    </span>
    </span>

CSS：

.fonts {display: none;
position: relative;
background-color: #f1f1f1;
min-width: 300px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}
.sizes{display: none;
position: relative;
background-color: #f1f1f1;
min-width: 72px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

#dropdown, #size,  .fontweight{
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: green solid 5px;
display: inline-block;
}


#fonts, #sizes{ 
display: inline;
position: relative;
}
#dropdownfonts{position: relative;
display: inline-block;  
}
#dropdown:hover, #dropdown:focus {
background-color: #2980B9;
}

JS：     函数bold（）{     document.getElementById（“ p”）。style.fontWeight =“ bold”;

}

function underline(){

document.getElementById("p").style.textDecoration="underline"
            }

function italic(){

document.getElementById("p").style.fontStyle="italic";
}

function show(){
document.getElementById("p").style.display="block";
}

T=document.getElementsByClassName("fonts")

function hide()
{   for(i=0;i<T.length;i++)
T[i].style.display="none"; }

function drop()
{for(i=0;i<T.length;i++)
T[i].style.display="inline-block";}

S=document.getElementsByClassName("sizes")

function hidesize()
{   for(i=0;i<T.length;i++)
S[i].style.display="none"; }

function dropsize()
{for(i=0;i<T.length;i++)
S[i].style.display="inline-block";}

function change(btn)
{A=btn
document.getElementById("p").style.fontFamily=A;}


function changesize(button)
{B=button
document.getElementById("p").style.fontSize=B +  "px";}

差不多就可以了！在执行此操作时，是否可以隐藏下拉菜单占用的空间？我认为那实际上可能是一个解决方案。 谢谢！

Answer 1

使跨度#fonts绝对，使它定位在最接近的相对位置，并且不会影响流程。

.dropdownfonts {
display:inline-block;
position: relative;
}
#fonts {
display:block;
position:absolute;
}