在段落的浮动右侧部分向左对齐文本

Question

I need to give some floated right text same start position. I have multiple p and every p is divided in two span. The initial span are floated left and seconds are floated right.

Some HTML and Image to be more clear about.

 .card { max-width: 20rem; border: 1px solid #004d99; border-radius: 20px; }.card-header { background-color: #fff; border-bottom: 1px solid #004d99; border-top-left-radius: 20px; border-top-right-radius: 20px; }.card-header input { border: 2px #004d99 solid; }.card-header span { color: #90ee90; }.card-header span i { margin-left: 3%; }.card-body { margin-bottom: 0px; margin-top: 0px; }.card-body p span:first-child { float: left; }.card-body p span:last-child { float: right; text-align: left; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <div class="card col-md-3 text-dark bg-light m-3"> <div class="card-header"> <input class="form-check-input chk" type="checkbox" value="" id="flexCheckDefault"> Stato: Pubblicato <span> &#11044 </span><i class="far fa-file-alt"></i>11 <i class="fas fa-eye"></i>&nbsp;112 </div> <div class="card-body"> <p> <span >Nome:</span> <span >Lotto Prova</span> </p> <p> <span>Data Pubblicazione:</span> <span>10/12/2021</span> </p> <p> <span>Data di Scadenza:</span> <span>25/12/2021</span> </p> <p> <span>Accesso:</span> <span>Link</span> </p> </div> </div>

What I have:

What I need:

Thanks to who will answer!

Answer 1

Actually, this type of content is a typical example where you can use a table, and its default settings will do exactly what you are asking for. So I modified your code accordingly, using CSS-table display parameters (but you could as well use actual HTML table/tr/td/th tags, then you wouldn't need that CSS and it would semantically be better).

Note: I erased your inline-styles for the spans, and I also erased the md-3 class from the card, since otherwise the content simply wouldn't fit into the card line-per-line, but cause breaks due to the limited width, at least here in the snippet (different on wide screens).

 .card { border: 1px solid #004d99; border-radius: 20px; width: 300px; }.card-header { background-color: #fff; border-bottom: 1px solid #004d99; border-top-left-radius: 20px; border-top-right-radius: 20px; }.card-header input { border: 2px #004d99 solid; }.card-header span { color: #90ee90; }.card-header span i { margin-left: 3%; }.card-body { margin-bottom: 0px; margin-top: 0px; display: table; }.card-body > p { display: table-row; }.card-body > p > span { display: table-cell; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <div class="card text-dark bg-light m-3"> <div class="card-header"> <input class="form-check-input chk" type="checkbox" value="" id="flexCheckDefault"> Stato: Pubblicato <span> &#11044 </span><i class="far fa-file-alt"></i>11 <i class="fas fa-eye"></i>&nbsp;112 </div> <div class="card-body"> <p> <span>Nome:</span> <span>Lotto Prova</span> </p> <p> <span>Data Pubblicazione:</span> <span>10/12/2021</span> </p> <p> <span>Data di Scadenza:</span> <span>25/12/2021</span> </p> <p> <span>Accesso:</span> <span>Link</span> </p> </div> </div>

Answer 2

You can accomplish this with flexbox and simplify the HTML in the process.

Remove the inline style from the span elements and setup the CSS to make the flex children take up exactly half the space. This will give you the layout you're looking for.

 .card-body>p { display: flex; flex-flow: row nowrap; }.card-body>p>* { flex: 1; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <div class="card col-md-3 text-dark bg-light m-3" style="max-width: 20rem; border: 1px solid #004d99; border-radius: 20px;"> <div class="card-header" style="background-color: #fff; border-bottom: 1px solid #004d99; border-top-left-radius: 20px; border-top-right-radius: 20px;"> <input style="border: 2px #004d99 solid;" class="form-check-input chk" type="checkbox" value="" id="flexCheckDefault"> Stato: Pubblicato <span style="color: #90ee90;"> &#11044 </span><i class="far fa-file-alt" style="margin-left: 3%;"></i>11 <i class="fas fa-eye" style="margin-left: 3%;"></i>&nbsp;112 </div> <div class="card-body"> <p><span>Nome:</span><span>Lotto Prova</span></p> <p><span>Data Pubblicazione:</span><span>10/12/2021</span></p> <p><span>Data di Scadenza:</span><span>25/12/2021</span></p> <p><span>Accesso:</span><span>Link</span></p> </div> </div>