html按钮和选择框不对齐

我想创建一个富文本编辑器。我创建了一些带有IMG值的按钮。我在按钮之间也有一些选择框。问题是选择框没有与其余的按钮对齐。html按钮和选择框不对齐

enter image description here

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

来源

2012-04-05 user1241438

是否向formatSelect类工作添加了负边距？ 'margin-top：-10px;'等等（当然不是理想的，但它可能会在一个捏）。 – inkedmn 2012-04-05 03:41:13

不，它不起作用。我甚至试过-100px，不动一点 – user1241438 2012-04-05 03:43:24

你可以发布HTML吗？也许把所有东西都放在jsfiddle中？ – inkedmn 2012-04-05 03:44:45

写vertical-align:top在在线元素。这样写：

select, button{ 
vertical-align:top; 
}

来源

2012-04-05 03:51:03 sandeep

该解决方案对我来说非常合适。 – user1241438 2012-04-05 11:14:18

我测试了这一个...

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

来源

2012-04-05 03:50:47

如果你想让事情正确排列，而且它们只是图像，不要使用内联。内联元素会受到行高等因素的影响......并且在尝试将所有像素完美地排成一行时通常都不会很好。

如果您还没有图像块，制作你的按钮并选择块，并将所有的东西都放在左/里，以便它看起来像内联。另一种方法是，如果您只使用较新的浏览器，则需要制作图像块和按钮并选择内嵌块。

来源

2012-04-05 04:09:45

html按钮和选择框不对齐

回答

相关问题