CODEWITHSUNDEEP
htmlcss
Simon Kiely
Simon Kiely

Reputation: 6040

Get image to display inline with unordered list

I am really struggling to get a image to display inline with unordered list.

HTML:

<div class="customer-indiv man">
  <a class="customer_thumb" href="/fan/332profile.com">
    <img src="http://i.imgur.com/WiAvs8Q.jpg"/>
  </a>
  <ul>
    <li><a href="/fan/332profile.com">name of user</a></li>
    <li>phone no</li>
    <li>text</li>
  </ul>
</div>

CSS: 

.customer_thumb {
  display: inline-block;
}
.customer-indiv {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: .8em 0;
}
.customer-indiv:nth-child(4) {
  border-bottom: 0;
  padding-bottom: 0;
}
.customer-indiv:first-child {
  padding-top: 0;
}

I'd like it to be displayed, with the image to the left and the 3 li's to the right, which I believe is what my CSS should do. Like so:

        name
IMAGE   phone no
        text

Unfortunately, at the moment it outputs:

IMAGE
name
phone no
text

Upvotes: 1

Views: 337

Answers (2)

Stickers
Stickers

Reputation: 78676

There are few ways to achieve that:

  1. Flexbox

.customer-indiv {
  display: flex;
  align-items: center;
}
.customer_thumb img {
  display: block;
  max-width: 100px;
  height: auto;
}
<div class="customer-indiv man">
  <a class="customer_thumb" href="/fan/332profile.com">
    <img src="http://i.imgur.com/WiAvs8Q.jpg" />
  </a>
  <ul>
    <li><a href="/fan/332profile.com">name of user</a></li>
    <li>phone no</li>
    <li>text</li>
  </ul>
</div>

  1. CSS table

.customer-indiv {
  display: table;
}
.customer-indiv > a,
.customer-indiv > ul {
  display: table-cell;
  vertical-align: middle;
}
.customer_thumb img {
  display: block;
  max-width: 100px;
  height: auto;
}
<div class="customer-indiv man">
  <a class="customer_thumb" href="/fan/332profile.com">
    <img src="http://i.imgur.com/WiAvs8Q.jpg" />
  </a>
  <ul>
    <li><a href="/fan/332profile.com">name of user</a></li>
    <li>phone no</li>
    <li>text</li>
  </ul>
</div>

  1. Inline blocks

.customer-indiv {
  font-size: 0; /*remove whitespace*/
}
.customer-indiv > a,
.customer-indiv > ul {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
}
.customer_thumb img {
  display: block;
  max-width: 100px;
  height: auto;
}
<div class="customer-indiv man">
  <a class="customer_thumb" href="/fan/332profile.com">
    <img src="http://i.imgur.com/WiAvs8Q.jpg" />
  </a>
  <ul>
    <li><a href="/fan/332profile.com">name of user</a></li>
    <li>phone no</li>
    <li>text</li>
  </ul>
</div>

Upvotes: 1

Nutshell
Nutshell

Reputation: 8537

You can do it like this :

See this fiddle

CSS : 

.customer_thumb img { max-width: 50px; display: inline-block; vertical-align: top; }
ul {  display: inline-block; vertical-align: top; margin: 0; }

Upvotes: 0

Related Questions