locked
float left & float right within a <label> ignored RRS feed

  • Question

  • User379720387 posted

    I have a currency symbol and money value within a label

    <label><span style="float:left;">@currencysymbol</span> <span style="float:right;">@String.Format("{0:###}", @billingRate)</span></label>

    Hoping to get:

    $      10

    $    100

    $  1000

    Instead I get:

    $1

    $100

    $1000

    Why is the float ignored?

    Friday, November 25, 2016 5:12 PM

Answers

  • User-474980206 posted

    the float is only valid with block elements. a span by default is an inline, not block element, so the float is ignored. also a label is usually an inline element, so its does not support floating children.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, November 27, 2016 12:09 AM
  • User283571144 posted

    Hi wavemaster,

    What is the approach then to get 

    As bruce says, you could set the lable css style's display property to 'block', then the folat property will be worked well.

    More details, you could refer to follow codes and image:

     

           <div class="row">
                    <div class="col-xs-1 col-xs-offset-1  col-sm-1 col-off-sm-1 col-md-4 col-md-offset-1 col-lg-1 col-offset-lg-1">
                  
                       <input type="checkbox" id="aaa" name="shots" value="aaa" checked="checked" style="margin-right: 6px; margin-top: 15px;" />
                        <input type="checkbox" id="bbb" name="shots" value="bbb" style="margin-right: 6px; margin-top: 15px;" />
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <label for="aaaa" style="margin-top: 15px; display:block; color: darkgray;"><span style="float: left;">$</span> <span style="float: right;">100</span></label>
                    </div>
                    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
                        <label for="bbbb" style="margin-top: 15px;  display:block; margin-right: 6px; color: darkgray;">aaaaaaaaaaaaaaaaaa</label>
                    </div>
                </div>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 6, 2016 9:23 AM

All replies

  • User2103319870 posted

    Your code is working fine. However if you have containter element like div or panel then ensure that you have provided enough width to the container control as well.

    Friday, November 25, 2016 8:40 PM
  • User379720387 posted

    The container is a bootstrap col 3, there should be plenty of space.

    @foreach (var sname in shotsannual1) 
                                                                        {
                                                                            <div class="row">
                                                                                <div class="col-xs-1 col-xs-offset-1  col-sm-1 col-off-sm-1 col-md-4 col-md-offset-1 col-lg-1 col-offset-lg-1">
                                                                                    @if (oldservices.Contains(@sname.id))
                                                                                    {
                                                                                        <input type="checkbox" id="@sname.id" name="shots" value="@sname.id" checked="checked" style="margin-right: 6px;margin-top: 15px;" />
                                                                                    }
                                                                                    else
                                                                                    {
                                                                                        <input type="checkbox" id="@sname.id" name="shots" value="@sname.id" style="margin-right: 6px;margin-top: 15px;" />
                                                                                    }
                                                                                </div>
                                                                                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                                                                                    <label for="@sname.id" style="margin-top: 15px; color:darkgray;"><span style="float:left;">@currencysymbol</span> <span style="float:right;">@String.Format("{0,20:#,##0}", sname.billingRate)</span></label>
                                                                                </div>
                                                                                <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
                                                                                    <label for="@sname.id" style="margin-top: 15px; margin-right: 6px; color:darkgray;">@sname.Service.ServiceName (@sname.Service.shortForm)</label>
                                                                                </div>
                                                                            </div>
                                                                        }

    Saturday, November 26, 2016 3:18 AM
  • User527778624 posted

    Hi,

    You may find multiple solutions here: http://stackoverflow.com/questions/17938303/how-to-float-a-span-in-a-div

    you may need to apply block rule and add clear fix at end.

    Saturday, November 26, 2016 6:06 AM
  • User-474980206 posted

    the float is only valid with block elements. a span by default is an inline, not block element, so the float is ignored. also a label is usually an inline element, so its does not support floating children.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, November 27, 2016 12:09 AM
  • User379720387 posted

    @bruce

    What is the approach then to get 

    a check box

    $ left align / value right align

    an area for text?

    Sunday, November 27, 2016 1:19 AM
  • User283571144 posted

    Hi wavemaster,

    What is the approach then to get 

    As bruce says, you could set the lable css style's display property to 'block', then the folat property will be worked well.

    More details, you could refer to follow codes and image:

     

           <div class="row">
                    <div class="col-xs-1 col-xs-offset-1  col-sm-1 col-off-sm-1 col-md-4 col-md-offset-1 col-lg-1 col-offset-lg-1">
                  
                       <input type="checkbox" id="aaa" name="shots" value="aaa" checked="checked" style="margin-right: 6px; margin-top: 15px;" />
                        <input type="checkbox" id="bbb" name="shots" value="bbb" style="margin-right: 6px; margin-top: 15px;" />
                    </div>
                    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                        <label for="aaaa" style="margin-top: 15px; display:block; color: darkgray;"><span style="float: left;">$</span> <span style="float: right;">100</span></label>
                    </div>
                    <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
                        <label for="bbbb" style="margin-top: 15px;  display:block; margin-right: 6px; color: darkgray;">aaaaaaaaaaaaaaaaaa</label>
                    </div>
                </div>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 6, 2016 9:23 AM
  • User379720387 posted

    Thanks all!

    Looking sweet.

    Thursday, December 8, 2016 2:57 AM
  • User-876456450 posted

    your code is working fine but , here is need to one element which contains all the other element like as container so you can take a div and give inline style to fix a width or just copy paste your code in that div its working fine.

    https://jsfiddle.net/bft50r7d/2/

    <div style="width:50px;">
            <label >
              <span style="float:left;">$</span>
              <span style="float:right;">10</span>
            </label>
    </div>

    Thursday, December 8, 2016 6:53 AM