获取图像以无序列表内联显示

Question

我真的很难让图像以无序列表显示内联。

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;
}

我想要显示它，左边是图像，右边是3个，我相信这是我的CSS应该做的。像这样：

        name
IMAGE   phone no
        text

不幸的是，目前它输出：

IMAGE
name
phone no
text

Answer 1

实现这一目标的方法很少：

1. Flexbox的

<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>

.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;
}

1. CSS表

<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>

.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;
}

1. 内联块

<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>

<script>
$(document).ready(function(){
$('body').scrollspy({target: "#navbar", offset: 50});   
$("#myNavbar a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top
    }, 2150, function(){
     });
  });
});
</script> 

Answer 2

你可以这样做：

See this fiddle

CSS：

csrutil status


csrutil disable (then reboot)


csrutil enable (then reboot)