html 按钮和 select 框未对齐

Question

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

我试图修改边距和填充。 试图为按钮和 select 框创建单独的 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>

Answer 1

在内联元素中写入vertical-align:top 。 像这样写：

select, button{
 vertical-align:top;
}

Answer 2

如果你想让东西正确排列，而它们只是图像，请不要使用内联。 行内元素会受到行高等因素的影响……而且在尝试将其全部排列成像素完美时，它通常不会很好。

如果还没有，请制作您的图像块。 制作按钮并选择块，并将所有内容左/右浮动，使其看起来像内联。 另一种方法是，如果您只使用较新的浏览器，则改为制作图像块和按钮并选择内联块。

Answer 3

我测试过这个...

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