HTML，CSS:左侧的href图像，在<ul>

HTML,CSS : a href image to the left , in <ul>

本文关键字：lt ul gt 图像 href CSS HTML      更新时间：2023-09-26

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

  • align="left"时，图像将转到屏幕的中间
  • display:inline、display:inline-block、display:block，并且图像位置不变

有人知道怎么解决这个问题吗
我在fiddle上发布了所有内容：http://jsfiddle.net/vazjLqwv/

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

您可以在保存图像的a中使用float:left，也可以使用"display:inline block"，但在第二种情况下，您需要一个包装来保存其他的"a"，请参阅我在http://jsfiddle.net/vazjLqwv/1/

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

只更改LIST:

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

问候

在工作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; 
}

检查这个使用以下CSS 的jsfiddle

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

我刚刚用<img>写了一个<a>标签，然后在<li> 中写了另一个<a>标签

<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>
相关文章：