I have a header with several radio buttons that let the user choose between different list views. I am not able to change it so it goes in one line. The width of the four buttons is greater than the screen size and I am not able to limit the width of each input. 

Here is the code of that part:

```
<div data-role="header" data-theme="b" data-position="fixed" style="height:45px;width:100%;">
<div class="centerFieldset">

    <fieldset class="radioBtn" data-role="controlgroup" data-type="horizontal" style="margin-top:1px;">
        <label for="flow" >Rivers</label> 
        <input class="type" type="radio" name="radio" id="flow" value="flow"
            onClick="javascript:changeFlow()" <?php print $flow_selected;?> />
        <label for="lake" >Lakes</label> 
        <input class="type" type="radio" name="radio" id="lake" value="lake"
            onClick="javascript:changeLakes()" <?php print $lake_selected;?> />
        <label for="meteo" >Meteo</label>
        <input class="type" type="radio" name="radio" id="meteo" value="meteo"
            onClick="javascript:changeMeteo()" <?php print $meteo_selected;?>/>
        <label for="tableau" >Tableau</label>
        <input class="type" type="radio" name="radio" id="tableau" value="tableau"
            onClick="javascript:changeMeteo()" />
    </fieldset>
</div>
</div>

```

The CSS file is:

.centerFieldset {
 text-align: center;
}

.centerFieldset fieldset {
 display: inline;
 margin-left: auto;
 margin-right: auto;
 width:100%;
} 

Here is how it looks like:

![enter image description here](https://i.stack.imgur.com/VWlaO.png)

When I try to limit the label width to 20% I get this:

![enter image description here](https://i.stack.imgur.com/hXZql.png)