CODEWITHSUNDEEP
htmlcssfont-awesome
Szekelygobe
Szekelygobe

Reputation: 2695

Placing <span> element and fontawesome icon in same line

I have a problem placing elements in one line.

<div class="container">
  <ul id="suggestion_list"> 
    <li class="mp_search_suggest_element">
        <span >
            <b>some bold text</b> here 
            <i class="fa fa-bed fa-fw" aria-hidden="true"></i>
        </span>
    </li>
    <li class="mp_search_suggest_element">
        <span >
            <b>some bold text</b> some long text here
            <i class="fa fa-bed fa-fw" aria-hidden="true"></i>
        </span>
    </li>
  </ul>
</div>

I load the ul dynamically via ajax in the container div. I'd like to have the text aligned to the left, the icon to the right, in one line. So the line stretches the container div to fit in and never displays the text or the icon in two lines.

The css: 

.container {
   display: inline-block;
   position: absolute;
   width: auto;
   min-width: 350px;
   max-width: 600px;
   padding: 10px 0;
 }

 ul{
   list-style-type: none;
 }

 li{
   width: 100%;
   white-space: nowrap ;
 }

So this is what I have so far.

Upvotes: 0

Views: 7430

Answers (4)

Clint
Clint

Reputation: 1

I think this might be what you are looking for. There are some classes that font awesome gives you that you can add to your different list tags to make it inline.

https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/icons-in-a-list

Upvotes: 0

Fran&#231;ois No&#235;l
Fran&#231;ois No&#235;l

Reputation: 455

First of all, you need to remove the fa-fw class because it add a text-align: center; to the icon. Then, it is necessary that you separate the texts and the icon, so that the positioning of these is easier.

I made an exemple to show you how I did it: JSFiddle.

I changed the HTML structure of you're li:

<li class="mp_search_suggest_element">
  <span><b>some bold text</b> here</span><i class="fa fa-bed fa-fw" aria-hidden="true"></i>
</li>

I also changed the CSS of you're li and added some for the texts and the icon:

li {
  width: 200px;
  border: 1px solid red;
  white-space: nowrap;
  display: block;
}
span {
  display: inline-block;
  width: calc(100% - 30px);
  border: 1px solid blue;
}
i {
  display: inline-block;
  width: 50%;
  text-align: right;
 }

I hope it solve you're problem.
UPDATE: Added the calc CSS (See my comment).

Upvotes: 0

jafarbtech
jafarbtech

Reputation: 7023

You can use float:right; to make it aligned right with transform: translateY(-100%) !important;

.container {
  display: inline-block;
  position: absolute;
  width: auto;
  min-width: 350px;
  max-width: 600px;
  padding: 10px 0;
}
ul {
  list-style-type: none;
}
li {
  width: 100%;
  border: 1px solid red;
  white-space: nowrap;
  display: block;
}
span {
  display: inline-block;
  width: calc(100%-30px);
  border: 1px solid blue;
}
i {
  display: inline-block;
  width: 30px;
  text-align: right;
  border: 1px solid green;
  float: right;
  transform: translateY(-100%) !important;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="container">
  <ul id="suggestion_list">
    <li class="mp_search_suggest_element">
      <span><b>some bold text</b> hedfreaf asf sasdasdasf asdf f adsf asdf sdf sdf</span><i class="fa fa-bed" aria-hidden="true"></i>
    </li>
    <li class="mp_search_suggest_element">
      <span><b>some bold text</b> here</span><i class="fa fa-bed" aria-hidden="true"></i>
    </li>
  </ul>
</div>

Upvotes: 0

Brad
Brad

Reputation: 8698

You can also do this with flexbox if you like. make the li a flexbox container.

see example:

.container {
  display: inline-block;
  position: absolute;
  width: auto;
  min-width: 350px;
  max-width: 600px;
  padding: 10px 0;
  background: #333;
}

ul {
  list-style-type: none;
  color: #eee;
}

li {
  width: 100%;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
}
li span:nth-child(2){
  padding-right: 10px;
}
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css ">
<div class="container">
  <ul id="suggestion_list">
    <li class="mp_search_suggest_element">
      <span><b>some bold text</b> text here</span>
      <span><i class="fa fa-bed fa-fw" aria-hidden="true"></i></span>

    </li>
    <li class="mp_search_suggest_element">
      <span><b>some bold text</b> some long text here</span>
      <span><i class="fa fa-bed fa-fw" aria-hidden="true"></i></span>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions