Question 44923 in Html Question posted in
Some basic documentation can be found here.

Display long span and i on the same line in a table row – Html

I have the following issue, the icon normally should have enough space to go on the same line as the text:

enter image description here

But it doesn’t and I’m not sure what css to use for it:

<tr>
  <td>22/06/2021 15:20:52</td>
  <td>
   <span> 
    The apple is red.
    <i class="fa fa-pencil padding-left-3" />
   </span>
  </td>

If the text is smaller, the icon is displayed nicely on the same line, but if the text is bigger then it just shifts to the next line.

What can be used for it?

Tags:

2

Answers


  1. 0

    html file:

    <tr>
      <td>22/06/2021 15:20:52</td>
      <td>
       <span class="text"> 
        The apple is red.
        <i class="fa fa-pencil padding-left-3" />
       </span>
      </td>

    css file:

    .text{
  display: flex;
  align-items: center;
}
    Login or Signup to reply.
  2. 0

    if you have enough room for the icon element then it will work fine. Make sure adjusting some padding and margin of other two elements beside.

    Or you can simply apply the CSS.

    span{
  display: flex;
  align-items: center; /* optional */
  justify-content: center; /* optional */
}

    Though the element is inline element, The flex property will arrange its children in a row default. until explicitly you set the property

    flex-direction: column;

    Make sure when you do this it will change all the span element in your code. I suggest better use class selector or id selector in css. I hope this will help.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search