whytheq whytheq - 1 month ago 7
HTML Question

Move input control position on screen

I have the following code:

.clickBut {
left: 10px; /*<<<NO IMPACT*/
font-family: verdana;
font-size: 9px;
font-weight: bold;
background-color: #ffa500 !important;
border-radius: 100px;
}

.clickRadio {
left: 200px; /*<<<NO IMPACT*/
font-family: verdana;
left: 200px;
}
</style>
</head>
<input id="clickMe" type="button" value="Refresh|Reset" onclick="resetRefresh();" class="clickBut" />
<label>
<input type="radio" name="mode" value="size" class="clickRadio" checked> Size</label>
<label>
<input type="radio" name="mode" value="count" class="clickRadio"> Count</label>


I'm just wondering how I can position these controls away from the top-left corner of the screen. I've tried using
Left
in the
css
for both classes but this has no effect.

Answer

one way to do it is to wrap them in a div and use text-align property

to show them in the right:

<div style="text-align:right">
    <input id="clickMe" type="button" value="Refresh|Reset" onclick="resetRefresh();" class="clickBut" />
    <label>
         <input type="radio" name="mode" value="size" class="clickRadio" checked>
         Size
    </label>
    <label>
        <input type="radio" name="mode" value="count" class="clickRadio">
        Count
    </label>
</div>

to show them in the left :

<div style="text-align:left">
        <input id="clickMe" type="button" value="Refresh|Reset" onclick="resetRefresh();" class="clickBut" />
        <label>
             <input type="radio" name="mode" value="size" class="clickRadio" checked>
             Size
        </label>
        <label>
            <input type="radio" name="mode" value="count" class="clickRadio">
            Count
        </label>
    </div>