设置 span 元素的百分比宽度

Question

A straight forward question.. is it possible to set the width in percentage for a span tag in CSS? for example:

<span style="width: 50%">...</span> 

etc..

In my project I'm currently using divs but ofcourse after each div tag a line break gets inserted (which I don't want). So the most obvious solution to that is then to use span tags instead of div. But then I'm not able to define the width for the span tags.. Atleast not in a percentage kind of way.

Thanks in advance for any help!

Answer 1

Define the element as an inline block and you can control the width and height like a block element while keeping it inline with surrounding content.

#element {
  display: inline-block;
  width: 50%;
}

Answer 2

inline elements cannot have dimensions. do them to do so, and still remain inline, add:

display: inline-block

Answer 3

Add display: flex; on parent div style .

<div style="display: flex;">
    <span style="width:50%">...</span>
    <span style="width:50%">...</span>
</div>