CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
mino
mino

Reputation: 85

span returns to the line when i add a margin-left in %

I tried to add margin-left to the span in percentage, But the result is not as I want. It works only if I change the property display added to the label by bootstrap to block, Can anyone explain this behavior to me, and offer a solution? Thanks in advance.

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}
.field-description {
    margin-left: 20%;
}
<label class="gender-item">
  <input type="radio" id="male" class="field-checkbox" name="gender" value="">
  <span class="field-description">male</span>
</label>

enter image description here

Upvotes: 0

Views: 79

Answers (2)

Sagar Pednekar
Sagar Pednekar

Reputation: 334

I Guess you want span to be inline Check hereClick here

Upvotes: 0

Aziz
Aziz

Reputation: 7783

Percentage values relative to an inline-block that does not have an explicitly defined dimenion may cause weird problems, either refrain from using the percentage unit, or you could force the content to remain in one line with white-space: nowrap;

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
    white-space: nowrap;
}
.field-description {
    margin-left: 20%;
}
<label class="gender-item">
  <input type="radio" id="male" class="field-checkbox" name="gender" value="">
  <span class="field-description">male</span>
</label>

Upvotes: 3

Related Questions