Question

I am trying to build a list using CSS. I am able to make the list using ul and li elements. I am facing one issue: my text or anchor tag text shows below the image.

It should only be on the right side of the image. How can I achieve that?

li a {
  width: 40px;
  border: 1px solid red;
  //float:right
}

<ul xmlns="http://www.w3.org/1999/xhtml" class="content">
  <li xmlns="http://www.w3.org/1999/xhtml">
    <a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63085179,w-40,h-40/63085179.jpg">
      <stname>Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets
        against Vikram Kothari
      </stname>
    </a>
  </li>
  <li xmlns="http://www.w3.org/1999/xhtml">
    <a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63085077,w-40,h-40/63085077.jpg">
      <stname>BSF foils infiltration bid in Samba, ceasefire reported along LoC in Nowshera Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement Defence ministry admits to floundering ‘Make in India’, crippling delays in
        arms procurement
      </stname>
    </a>
  </li>
  <li xmlns="http://www.w3.org/1999/xhtml">
    <a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63084642,w-40,h-40/63084642.jpg">
      <stname>Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement
      </stname>
    </a>
  </li>  
</ul>

View on JS Bin

Answer 1

(changed answer after comment)

Use display: inline-block for images and texts. In this case you have to define a width for both so they both fit into one line. In my example the width for the text is calc(100% - 46px);, which is the full width of the container minus the width of the image.

Here's the result:

li a {
  width: 40px;
  border: 1px solid red;
}
ul.content>li img,
stname {
  display: inline-block;
  vertical-align: top;
}
stname {
  width: calc(100% - 46px);
}

<ul xmlns="http://www.w3.org/1999/xhtml" class="content">
  <li xmlns="http://www.w3.org/1999/xhtml">
    <a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63085179,w-40,h-40/63085179.jpg">
      <stname>Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Rotomac case: I-T dept files 6 charge sheets
        against Vikram Kothari
      </stname>
    </a>
  </li>
  <li xmlns="http://www.w3.org/1999/xhtml">
    <a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63085077,w-40,h-40/63085077.jpg">
      <stname>BSF foils infiltration bid in Samba, ceasefire reported along LoC in Nowshera Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement Defence ministry admits to floundering ‘Make in India’, crippling delays in
        arms procurement
      </stname>
    </a>
  </li>
  <li xmlns="http://www.w3.org/1999/xhtml">
    <a xmlns="" href=""><img src="https://opt.toiimg.com/recuperator/img/toi/m-63084642,w-40,h-40/63084642.jpg">
      <stname>Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement Rotomac case: I-T dept files 6 charge sheets against Vikram Kothari Defence ministry admits to floundering ‘Make in India’, crippling delays in arms procurement
      </stname>
    </a>
  </li>
</ul>

Answer 2

One option is to add something like the following styles

li img {
  float: left;
  clear: left;
  width: 20%;
}

li stname {
  width: 80%;
}

You need float the image left but you also need to set a width for the image and text so that the text never wraps under the image.

I have updated your jsbin: https://jsbin.com/layozexila/1/edit?html,css,output

how to shift text or anchor tag on right?

2 个答案: