locked
VS CODE warning inline-block is ignored due to the float. RRS feed

  • Question

  • User1575078971 posted

    visual studio throwing some error 

    float: left;
    inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'css(propertyIgnoredDueToDisplay)
    .class div {
      color: #e67e22;
      font-size: 150%;
      height: 54px;
      width: 54px;
      border: 2px solid #e67e22;
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      margin-right: 25px;
    padding: 5px; float: left; /*----HERE IS THE ISSUE--------*/ }

    I am unable to understand the issue.

    Please, anyone could help with it. and explain the reason.

    thank u

    Monday, December 16, 2019 2:19 PM

Answers

  • User475983607 posted

    Did you try...?

    .works-step div {
      color: #e67e22;
      font-size: 150%;
      height: 54px;
      width: 54px;
      border: 2px solid #e67e22;
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      margin-right: 25px;
      float: left;
      /*display: inline-block; edited text as u recommnded*/
      padding: 5px;
    }

    ...as also recommended?

    The community was not sure what UI you were looking for so the forum members asked you to try both approach and pick the one that works for you.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 19, 2019 3:05 PM
  • User665608656 posted

    Hi harshamrita,

    The way to eliminate the warning is to delete it.

    According to my previous reply, does it still have an error message?

    If it is displayed normally, please mark my previous response as the answer.

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 23, 2019 5:17 AM

All replies

  • User-474980206 posted

    inline-block and float contradict each other (an element can not be both). the waring is that float will override inline-block (because it comes after).

    Monday, December 16, 2019 6:24 PM
  • User665608656 posted

    Hi harshamrita,

    inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'css(propertyIgnoredDueToDisplay)

    This warning states that they way inline-block and float work are similar.

    So when you first set display: inline-block; and then set float: left; according to the css coverage first principle, the style set later will override the style set first, that is to say, float will override the inline-block style.

    If you want to clear this warning, select one of the styles(inline-block or float) to keep and delete the other according to your needs.

    For more details, you can read this article to deepen your understanding :

    Should You Use Inline-Blocks As A Substitute For Floats?

    Best Regards,

    YongQing.

    Tuesday, December 17, 2019 2:31 AM
  • User1575078971 posted

    I am very thankful to you to reply could re-write the CSS code for me to better understand

    Please. 

    THANK U

    Tuesday, December 17, 2019 2:14 PM
  • User-474980206 posted

    If you want the float behavior, set display to block, if you want the inline, set float to none. 

    Tuesday, December 17, 2019 3:20 PM
  • User665608656 posted

    Hi harshamrita,

    First of all, you have to understand that these two css styles are mutually exclusive.

    You can understand them through the following case:

    Here is html code:

            <div>
                dddddddddddd 
                <span class="mySpan">dd</span>
                <span class="mySpan">vv</span>
                vvvvvvvvvvvvv
            </div>

    When the style is " display: inline-block;"

        <style>
            .mySpan{
                color: #e67e22;
                font-size: 150%;
                height: 54px;
                width: 54px;
                border: 2px solid #e67e22;
                border-radius: 50%; 
                text-align: center;
                margin-right: 25px;
                padding: 5px; 
    display: inline-block; } </style>

    Here is the result :

    When the style is " float:left;"

        <style>
            .mySpan{
                color: #e67e22;
                font-size: 150%;
                height: 54px;
                width: 54px;
                border: 2px solid #e67e22;
                border-radius: 50%;
                text-align: center;
                margin-right: 25px;
                padding: 5px;
                float: left; 
            }
        </style>

    Here is the result :

    As can be seen from the above example, the difference between these two styles for class ="mySpan" is the position where they are displayed.

    The reason for mutual exclusion is that the module with class ="mySpan" will only appear in a specific location when you running your html,so you need to choose one of these two styles instead of using them at the same time.

    Best Regards,

    YongQing.

    Wednesday, December 18, 2019 1:44 AM
  • User1575078971 posted

    THANKS after editing as spectated my text place under the element.

    Look at the HTML

    <div class="works-step">
              <div>1</div>
              <p>Choose the subscription plan that best fits your needs and sign up today.</p>
            </div>
            <div class="works-step">
              <div>2</div>
              <p>Order your delicious meal using our mobile app or website. Or you can even call us!</p>
            </div>
    .works-step div {
      color: #e67e22;
      font-size: 150%;
      height: 54px;
      width: 54px;
      border: 2px solid #e67e22;
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      margin-right: 25px;
     /*float: left;*/
      display: inline-block;/*edited text as u recommnded*/
      padding: 5px;
    }
    
    Wednesday, December 18, 2019 2:40 AM
  • User1575078971 posted

    sorry in the previous reply I forgot to mention it didn't work My bad I edited as your direction but icon are not getting inline 

    extremely sorry, and thank you for pm me

    well with warning code, it works fine but my aim is to get rid of that warning if possible.

    /*float: left;*/

    Thursday, December 19, 2019 2:46 PM
  • User475983607 posted

    Did you try...?

    .works-step div {
      color: #e67e22;
      font-size: 150%;
      height: 54px;
      width: 54px;
      border: 2px solid #e67e22;
      border-radius: 50%;
      display: inline-block;
      text-align: center;
      margin-right: 25px;
      float: left;
      /*display: inline-block; edited text as u recommnded*/
      padding: 5px;
    }

    ...as also recommended?

    The community was not sure what UI you were looking for so the forum members asked you to try both approach and pick the one that works for you.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 19, 2019 3:05 PM
  • User665608656 posted

    Hi harshamrita,

    The way to eliminate the warning is to delete it.

    According to my previous reply, does it still have an error message?

    If it is displayed normally, please mark my previous response as the answer.

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, December 23, 2019 5:17 AM