Question

我正在尝试将图像（也是一个链接）对齐到我的列表左侧我尝试过使用：

align="left"图片显示在屏幕中间。
display:inline，display:inline-block，display:block并且图像位置没有任何变化。

任何人都知道如何解决这个问题？我在小提琴上发布了所有内容： http://jsfiddle.net/vazjLqwv/

注意：这就是我要做的事情： http://i.gyazo.com/bbee47d76535f87a7dba09cee2dd7083.png

Answer 1

你可以使用float：左边的a保存图像，或者你可以使用＆＃39; display：inline-block＆＃39;，但在第二种情况下你需要一个包装来保存其他＆＃39; a，查看我在http://jsfiddle.net/vazjLqwv/1/

所做的更改

每个李：

<li>
    <a href="?album=asdasd?song=asdasd"><img src="http://andreiverner.com/wp-content/uploads/2012/01/how-to-create-psychedelic-landscape-vector-cd-cover-with-adobe-illustrator-part-ii.jpg" style="width:100px;height:100px"></a>
    <p>
       <a href="?album=asdasd?song=asdasd">Album: asd asdasd ads asdas asal</a>
       <a href="?album=asdasd?song=asdasd">Song: asdasdsadasd asd</a>
       <a href="?album=asdasd?song=asdasd">Artist: asdasd d  dsd dsadasd asd</a>
    </p>
</li>

和css：

#itemContainer li > a {
  text-decoration: none;
  color: #000;
  display: inline-block;
  vertical-align:middle;
}

#itemContainer li > p {
    overflow:hidden;
    margin-left:10px;
    display:inline-block;
    vertical-align:middle;
}

#itemContainer li > p > a {
  display:block;
}

Answer 2

完成并以 working Fiddle 欢呼声更新！

<ul id="itemContainer">   
          <li>
              <a class="one" href="?album=asdasd?song=asdasd">Album: asd asdasd ads asdas asal</a>
              <a class="one" href="?album=asdasd?song=asdasd">Song: asdasdsadasd asd</a>
              <a class="one" href="?album=asdasd?song=asdasd">Artist: asdasd d  dsd dsadasd asd</a>
              <a href="?album=asdasd?song=asdasd"><img src="http://andreiverner.com/wp-content/uploads/2012/01/how-to-create-psychedelic-landscape-vector-cd-cover-with-adobe-illustrator-part-ii.jpg" style="width:100px;height:100px"></a>
              </li>
              <li>juicy-r</li>
              <li>its all about the</li>      
              <li>asdsadsad</li>
              <li>asd</li>
              <li>dsa</li>    
              <li>dsa</li>
              <li>asdsadsad</li>
              <li>asd</li>
              <li>dsa</li>  
              <li>asdsadsad</li>
              <li>asd</li>
              <li>dsa</li>  
          </ul>

CSS

a img{
    float:left;
    margin:10px 10px 10px 0;
    display:block;  
    position:absolute;
    top:0;
}
.one{
   margin-left:110px;
top:-10px;
position:relative;    
}
div#content { 
width: 990px;  
display: inline-block;
}

a { 
color: #222;
text-decoration: none; 
}

a:visited { 
color: #222; 
}

a:focus { 
outline: thin dotted; 
}

a:hover, a:active { 
outline: 0;   
}

ul#itemContainer { 
list-style: none; 
padding:0; 
margin: 20px 0; 
    padding-top:40px;
  width: 990px; 
  -moz-column-count: 2;
  -webkit-column-count: 2;
   column-count: 2;
}

ul#itemContainer li { 
display: block; 
margin: 5px; 
zoom: 1;
  font: 200 15px/1.5;
  border-bottom: 1px solid #ccc;
}

/*
#itemContainer  li:last-child{
  border: none;
}
*/ 

#itemContainer li a {
  text-decoration: none;
  color: #000;
  display: block;
  width: 100%;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

#itemContainer li:hover {

}

#itemContainer li a:hover {

    color: silver;
}

.holder {
margin: 15px 0;
}

.holder a {
font-size: 12px;
cursor: pointer;
margin: 0 5px;
color: #333;
}

.holder a:hover {
background-color: #222;
color: #fff;
}

.holder a.jp-previous { 
margin-right: 15px; 
}

.holder a.jp-next { 
margin-left: 15px; 
}

.holder a.jp-current, a.jp-current:hover {
color: #FF4242;
font-weight: bold;
}

.holder a.jp-disabled, a.jp-disabled:hover {
color: #bbb;
}

.holder a.jp-current, a.jp-current:hover, .holder a.jp-disabled, a.jp-disabled:hover {
cursor: default;
background: none;
}

.holder span { 
margin: 0 5px; 
}

form { 
float: right; 
margin-right: 10px; 
}

form label { 
margin-right: 5px; 
}

Answer 3

选中使用以下CSS的jsfiddle

 a img{
    float:left;
    display:block;   
}

我刚刚在<a>

中的另一个<img>标记之前写了<a>标记<li>

<li>
           <a href="?album=asdasd?song=asdasd"><img src="http://andreiverner.com/wp-content/uploads/2012/01/how-to-create-psychedelic-landscape-vector-cd-cover-with-adobe-illustrator-part-ii.jpg" style="width:100px;height:100px"></a>
           <a href="?album=asdasd?song=asdasd">Album: asd asdasd ads asdas asal</a>
           <a href="?album=asdasd?song=asdasd">Song: asdasdsadasd asd</a>
           <a href="?album=asdasd?song=asdasd">Artist: asdasd d  dsd dsadasd asd</a>
</li>

Answer 4

仅更改列表：

  <ul id="itemContainer">     
      <li><div style="float:left;"><a href="?album=asdasd?song=asdasd">Album: asd asdasd ads asdas asal</a>
          <a href="?album=asdasd?song=asdasd">Song: asdasdsadasd asd</a>
          <a href="?album=asdasd?song=asdasd">Artist: asdasd d  dsd dsadasd asd</a>
          </div><a href="?album=asdasd?song=asdasd"><img src="http://andreiverner.com/wp-content/uploads/2012/01/how-to-create-psychedelic-landscape-vector-cd-cover-with-adobe-illustrator-part-ii.jpg" style="width:100px;height:100px"/></a>
          </li>
      </ul>

围绕链接制作DIV并将浮动设置为左侧。并且IMG不在DIV中。

问候

HTML，CSS：左侧的href图像，位于<ul> </ul>中

4 个答案: