如何在地图上创建水平工具栏？

Question

我想将OpenLayers.Control.Button放入水平工具栏（OpenLayers.Control.Panel），但现在按钮是垂直样式。请参阅以下jsfiddle：

http://jsfiddle.net/K2WaA/68/

提前谢谢！这是代码：

HTML：

<div id="mapdiv"></div>

使用Javascript：

var options = {
    numZoomLevels: 2,
    controls: [new OpenLayers.Control.Navigation(),
               new OpenLayers.Control.PanZoomBar()]
};

map = new OpenLayers.Map("mapdiv", options);

    var panel_type2 = new OpenLayers.Control.Panel({displayClass: 'Panel2'});
    map.addControl(panel_type2);

    var _aBtn2 = new OpenLayers.Control.Button({displayClass: 'first', 
                                                type: OpenLayers.Control.TYPE_TOOL, 
                                                eventListeners: {
                                                    'activate': function(){alert('[First] Control of OpenLayers.Control.TYPE_TOGGLE type is activated')},
                                                    'deactivate': function(){alert('[First] Control of OpenLayers.Control.TYPE_TOGGLE type is deactivated')}
                                                }});
    panel_type2.addControls([_aBtn2]);

    var _aBtn3 = new OpenLayers.Control.Button({displayClass: 'second', 
                                                type: OpenLayers.Control.TYPE_TOOL, 
                                                eventListeners: {
                                                    'activate': function(){alert('[Second] Control of OpenLayers.Control.TYPE_TOGGLE type is activated')},
                                                    'deactivate': function(){alert('[Second] Control of OpenLayers.Control.TYPE_TOGGLE type is deactivated')}
                                                }});
    panel_type2.addControls([_aBtn3]);

map.addLayer(new OpenLayers.Layer('', {
    isBaseLayer: true,
    maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200)
}));
var buildingLayer = new OpenLayers.Layer.Vector("Buildings", {
    maxExtent: new OpenLayers.Bounds(-200, -200, 200, 200),
    strategies: [new OpenLayers.Strategy.Cluster({
        autoActivate: true,
        distance: 100
    })]
});

map.addLayer(buildingLayer);
buildingLayer.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(-50.126, 36.755))]);
map.zoomToMaxExtent();

CSS

#mapdiv {
    width: 400px;
    height: 400px;
    border: 1px solid #dddddd;
}

.Panel2 {
    width: 150px;
    height: 20px;
    cursor: pointer;
    left: 50px;
    background-color: #bbbbbb;
}

.firstItemInactive,.secondItemInactive {
    background: #ff0000;
    border: 2px solid #075f67;
    width: 18px;
    height: 18px;
}

.firstItemActive, .secondItemActive {
    background: #00ff00;
    border: 2px solid #dddddd;
    width: 18px;
    height: 18px;
}

Answer 1

添加float：left;

.firstItemInactive,.secondItemInactive {
    background: #ff0000;
    border: 2px solid #075f67;
    width: 18px;
    height: 18px;
    float:left;
}

.firstItemActive, .secondItemActive {
    background: #00ff00;
    border: 2px solid #dddddd;
    width: 18px;
    height: 18px;
    float:left;
}