css - Force 2 elements on the same line, always -


i have table has following contents:

enter image description here

created this:

<div class="currency">1,280.00</div>  div.currency {     text-align: right;     width: 100%; }  div.currency:before {     content: "$";     float: left; } 

problem when table cell not wide enough overflow dollar symbol next line. not clear in example $ sign align left , decimal value right (accounting style in excel).

is there way force them on same line , have resize table cell, long strings?

you can use flexbox on , default, flex row set nowrap won't wrap. use justify-content: space-between separate elements instead of using text-align , float

div.currency {    width: 50px;    background: #ccc;    display: flex;    justify-content: space-between;  }    div.currency:before {    content: "$";  }
<div class="currency">1,280.00</div>


Comments

Popular posts from this blog

c# - Update a combobox from a presenter (MVP) -

How to understand 2 main() functions after using uftrace to profile the C++ program? -

How to put a lock and transaction on table using spring 4 or above using jdbcTemplate and annotations like @Transactional? -