javascript - html button and select box not aligning - Stack Overflow

IT技术

更新时间：2025-04-070

admin管理员组
文章数量:1354447

I am trying to create a rich text editor. I have created some buttons with IMG values in them. I also have some select box in between the buttons. The issue is the select box is not getting aligned with the rest of the buttons.

I have tried to modify margins and padding. Tried to create separate DIV elements for buttons and select box. Nothing seems to work. If i dont use IMG inside the button then everything is fine. Below is my code

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>

I am trying to create a rich text editor. I have created some buttons with IMG values in them. I also have some select box in between the buttons. The issue is the select box is not getting aligned with the rest of the buttons.

I have tried to modify margins and padding. Tried to create separate DIV elements for buttons and select box. Nothing seems to work. If i dont use IMG inside the button then everything is fine. Below is my code

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>

Share Improve this question asked Apr 5, 2012 at 3:37 user1241438 1,5435 gold badges17 silver badges24 bronze badges

1 Does adding a negative margin to the formatSelect class work? margin-top:-10px;, etc. (Not ideal, of course, but it'd probably do in a pinch). – brettkelly Commented Apr 5, 2012 at 3:41
no it does not work. I tried even -100px, does not move a bit – user1241438 Commented Apr 5, 2012 at 3:43
Can you post the HTML? Maybe put everything in a jsfiddle? – brettkelly Commented Apr 5, 2012 at 3:44
Adding float:left, display:block on formatSelect work? And please, put in a jsfiddle so we can visualize better. – Victor Rodrigues Commented Apr 5, 2012 at 3:54
i am sorry i did not know about jsfiddle. Will try to use it next time – user1241438 Commented Apr 5, 2012 at 11:15

Add a ment |

3 Answers 3

Sorted by: Reset to default 9

write vertical-align:top in your inline elements. Write like this:

select, button{
 vertical-align:top;
}

If you want things to line up properly, and they're just images, do NOT use inline. Inline elements get affected by things like line-height, etc... and it just generally does not make nice when trying to line it all up pixel perfect.

Make your images blocks if not already. Make your buttons and selects blocks as well, and float everything left/rigt so that it looks like inline. An alternative, if you're using just newer browsers is instead make your images blocks and the buttons and selects inline-block.

I have tested this one...

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

本文标签： javascripthtml button and select box not aligningStack Overflow

版权声明：本文标题：javascript - html button and select box not aligning - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1744023282a2577598.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - html button and select box not aligning - Stack Overflow

3 Answers 3

更多相关文章