Javascript html按钮和选择框未对齐

我正在尝试创建一个富文本编辑器。我已经创建了一些带有IMG值的按钮。我在按钮之间还有一些选择框。问题是选择框没有与其余按钮对齐

我试图修改边距和填充。尝试为按钮和选择框创建单独的DIV元素。似乎什么都不管用。如果我不在按钮内使用IMG，那么一切都很好。 下面是我的代码

button.formatbutton, button.formatbutton:link, button.formatbutton:visited
{
    display:inline;
    height: 25px; 
    width: 25px; 
    margin:1px 0px;
    padding:0px;
    border:1px solid #ADB96E;
    background-color: #ADB96E;
    cursor:pointer;
}

button.formatbutton:hover, button.formatbutton:active
{
    display:inline;
    height: 25px; 
    width: 25px; 
    margin:1px 0px;
    padding:0px;
    border:1px solid #ADB96E;
    background-color: #7A991A;
}

select.formatSelect
{
    display:inline;
    height: 25px; 
    width: 100px; 
    margin:0px 0px 0px 0px;
    border:1px solid #ADB96E;
    background-color: #ADB96E;
    cursor:pointer;
}

div.divToolbar
{
    width: 850px;
    height:27px; 
    text-align: center; 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid #ADB96E;
}

div.divIframe
{
    width: 850px;
    height:350px; 
    text-align: center; 
    margin: 0px; 
    padding: 0px; 
    border: 0px;
    border-left: 1px solid #ADB96E;
    border-right: 1px solid #ADB96E;
    border-bottom: 1px solid #ADB96E;
}

div.divToolbar img
{
    height: 25px; 
    width: 25px; 
    display:inline;
    padding:0px;
    margin:0px;
    border:0px;     
}

iframe
{
    display:block;
    width: 850px; 
    height: 250px; 
    margin: 0px; 
    padding: 0px; 
    border:0px;

}

    <div align="center" class="divToolbar">

<button id="1" type="button" class="formatbutton" style="font-weight: bold;" value="B" 
onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('bold')" onBlur="blurButton(this)" onFocus="buttonFocus(this)" >
<img src="<c:url value="/resources/bold.png"/>" height="28px" width="28px" /></button><button 
id="2" type="button" class="formatbutton" style="font-style: italic;" value="I" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('italic')" onBlur="blurButton(this)" onFocus="buttonFocus(this)">
<img src="<c:url value="/resources/italics.png"/>" height="28px" width="28px" /></button><button 
id="3" type="button" class="formatbutton" style="text-decoration: underline;" value="U" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('underline')" onBlur="blurButton(this)" onFocus="buttonFocus(this)">
<img src="<c:url value="/resources/underline.png"/>" height="28px" width="28px" /></button> 



<button id="4" type="button" class="formatbutton" value="L" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('justifyleft')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="align left">
<img src="<c:url value="/resources/text_align_left.png"/>" height="28px" width="28px" /></button><button
id="5" type="button" class="formatbutton" value="C" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('justifycenter')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="center">
<img src="<c:url value="/resources/text_align_center.png"/>" height="28px" width="28px" /></button><button 
id="6" type="button" class="formatbutton" value="R" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('justifyright')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="align right">
<img src="<c:url value="/resources/text_align_right.png"/>" height="28px" width="28px" /></button>



<select class="formatSelect"
    onChange="fontEdit('fontname',this[this.selectedIndex].value)">
    <option value="Arial">Arial</option>
    <option value="Comic Sans MS">Comic Sans MS</option>
    <option value="Courier New">Courier New</option>
    <option value="Monotype Corsiva">Monotype</option>
    <option value="Tahoma">Tahoma</option>
    <option value="Times">Times</option>
</select> 
<select class="formatSelect"
    onChange="fontEdit('fontsize',this[this.selectedIndex].value)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select> 
<select class="formatSelect"
    onChange="fontEdit('ForeColor',this[this.selectedIndex].value)">
    <option value="black">-</option>
    <option style="color: red;" value="red">red</option>
    <option style="color: blue;" value="blue">blue</option>
    <option style="color: green;" value="green">green</option>
    <option style="color: pink;" value="pink">pink</option>
</select>

<button id="7" type="button" class="formatbutton" value="1" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('insertorderedlist')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="Numbered List">
<img src="<c:url value="/resources/list_numbered.png"/>" height="28px" width="28px" /></button><button 
id="8" type="button" class="formatbutton" value="●" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('insertunorderedlist')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="Bullets List">
<img src="<c:url value="/resources/list_bulleted.png"/>" height="28px" width="28px" /></button><button 
id="9" type="button" class="formatbutton" value="←" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('outdent')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="Outdent">
<img src="<c:url value="/resources/outdent.png"/>" height="28px" width="28px" /></button><button 
id="10" type="button" class="formatbutton" value="→" onClick="clickButton(this, '<c:url value="/resources/"/>');fontEdit('indent')"  onBlur="blurButton(this)" onFocus="buttonFocus(this)" title="Indent">
<img src="<c:url value="/resources/indent.png"/>" height="28px" width="28px" /></button>
</div>
<div align="center" class="divIframe">
<iframe id="textEditor">
</iframe>
<button type="button" onClick="ShowHtml()">ShowFrameContent</button>
</div>

button.formatbutton，button.formatbutton:链接，按钮。formatbutton:已访问
{
显示：内联；
高度：25px；
宽度：25px；
利润率：1px0px；
填充：0px；
边框：1px实心#ADB96E；
背景色：#ADB96E；
光标：指针；
}
按钮。格式化按钮：悬停，按钮。格式化按钮：活动
{
显示：内联；
高度：25px；
宽度：25px；
利润率：1px0px；
填充：0px；
边框：1px实心#ADB96E；
背景色：#7A991A；
}
select.formatSelect
{
显示：内联；
高度：25px；
宽度：100px；
保证金：0px 0px 0px 0px；
边框：1px实心#ADB96E；
背景色：#ADB96E；
光标：指针；
}
div.div工具栏
{
宽度：850px；
高度：27px；
文本对齐：居中；
边际：0px；
填充：0px；
边框：1px实心#ADB96E；
}
div.divIframe
{
宽度：850px；
高度：350px；
文本对齐：居中；
边际：0px；
填充：0px；
边界：0px；
左边框：1px实心#ADB96E；
右边框：1px实心#ADB96E；
边框底部：1px实心#ADB96E；
}
div.divimg
{
高度：25px；
宽度：25px；
显示：内联；
填充：0px；
边际：0px；
边界：0px；
}
iframe
{
显示：块；
宽度：850px；
高度：250px；
边际：0px；
填充：0px；
边界：0px；
}
“height=“28px”width=“28px”/>
“height=“28px”width=“28px”/>
“height=“28px”width=“28px”/>
“height=“28px”width=“28px”/>
“height=“28px”width=“28px”/>
“height=“28px”width=“28px”/>
Arial
连环漫画
信使新
单一型
塔荷马
时代
1.
2.
3.
4.
5.
-
红色
蓝色
绿色
粉红色
“height=“28px”width=“28px”/>
“height=“28px”width=“28px”/>
“height=“28px”width=“28px”/>
“height=“28px”width=“28px”/>
ShowFrameContent

我已经测试了这个

select.formatSelect
{
display:inline;
height: 25px; 
width: 100px; 
margin:0px 0px 0px 0px;
position:relative;
top:-7px;
border:1px solid #ADB96E;
background-color: #ADB96E;
cursor:pointer;
}

---

我已经测试了这个

select.formatSelect
{
display:inline;
height: 25px; 
width: 100px; 
margin:0px 0px 0px 0px;
position:relative;
top:-7px;
border:1px solid #ADB96E;
background-color: #ADB96E;
cursor:pointer;
}

---

在内联元素中写入

垂直对齐：top

。这样写：

select, button{
 vertical-align:top;
}

---

在内联元素中写入

垂直对齐：top

。这样写：

select, button{
 vertical-align:top;
}

---

如果你想让东西正确排列，并且它们只是图像，不要使用内联。内联元素会受到线条高度等因素的影响。。。当试图把所有的像素完美地排列在一起时，它通常是不好的

---

如果尚未设置图像块，请设置图像块。制作按钮并选择块，将所有内容向左/向右浮动，使其看起来像是内联的。另一种选择是，如果您只使用较新的浏览器，则将图像块和按钮设置为块，然后选择“内联块”。

如果您希望内容正确排列，并且它们只是图像，请不要使用内联块。内联元素会受到线条高度等因素的影响。。。当试图把所有的像素完美地排列在一起时，它通常是不好的

---

如果尚未设置图像块，请设置图像块。制作按钮并选择块，将所有内容向左/向右浮动，使其看起来像是内联的。另一种选择是，如果您使用的是较新的浏览器，则将图像块、按钮和选择内联块。

在formatSelect类中添加负边距是否有效<代码>页边距顶部：-10px，等等（当然不是很理想，但在必要的时候可能可以）。不，它不起作用。我甚至试过-100px，一点也不动。你能发布HTML吗？也许把所有东西都放在一个JSFIDLE中？在formatSelect work上添加float:left，display:block？请输入一个JSFIDLE，这样我们可以更好地可视化。很抱歉，我不知道JSFIDLE。下次会尝试使用它吗向formatSelect类添加负边距有效吗<代码>页边距顶部：-10px，等等（当然不是很理想，但在必要的时候可能可以）。不，它不起作用。我甚至试过-100px，一点也不动。你能发布HTML吗？也许把所有东西都放在一个JSFIDLE中？在formatSelect work上添加float:left，display:block？请输入一个JSFIDLE，这样我们可以更好地可视化。很抱歉，我不知道JSFIDLE。下次我会尝试使用它