Add two custom buttons horizontally on a openlayers map

I want add two additional buttons to a map with openlayers. With my code only the first button is displayed? What is wrong here?:

.olControlButton1ItemActive {
    position: absolute;
    background-image: url(add_blue.png);
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
}    
.olControlButton2ItemActive {
        position: absolute;
        background-image: url(minus_blue.png);
        top: 18;
        right: 0;
        width: 18px;
        height: 18px;
    }


    .olControlPanel {
        border: 1px solid black;
        top: 70px;
        left: 12px;
        width: 18px;
        height: 36px;
        position: absolute;
        cursor: pointer;
    }

....

map.setCenter (lonLat, zoom);
var button1 = new OpenLayers.Control.Button ({displayClass: 'olControlButton1', trigger: but开发者_如何学Goton1Clicked, title: 'Button is to be clicked'});
var button2 = new OpenLayers.Control.Button ({displayClass: 'olControlButton2', trigger: button2Clicked, title: 'Button is to be clicked'});

panel = new OpenLayers.Control.Panel({defaultControl: button1});
panel.addControls([button1,button2]);
map.addControl (panel);

The problem with your code is that when you add Controls to a Panel, only one of them is Active by default. So Button1 has the class olControlButton1ItemActive but the second Button has the class olControlButton2ItemInactive.

For your second button to work correctly you have to activate it, by adding this at the end of your code:

button2.activate()

Another option is to define the style for olControlButton2ItemInactive, but that way your button will be visible, but it'll not be enabled (So if you click it, it won't fire the event)

The problem is that the width of .olControlPanel is only 18px, so there's place only for one button. Change it to 36px and the second button should display horisontally.