标题下降到第二行

时间：2017-02-23 05:28:49

标签： html css

当尝试将图像和标题放入列表标记时，标题将下降到第二行。有办法解决这个问题吗？

ul {
  padding: 0;
  list-style-type: none;
}
#searchImg {
   width: 50px;
   height: 72px;
   white-space: nowrap;
   padding: 0;
   margin: 0;
}
#searchTitle {
   margin-left: 60px;
}
<ul id="myUL">
   <li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg"><p id="searchTitle">A Certain Magical Index</p></a></li>
   <li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg"><p id="searchTitle">Ajin</p></a></li>
   <li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg"><p id="searchTitle">Angel Beats!</p></a></li>
   <li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg"><p id="searchTitle">Attack on Titan</p></a></li>		
</ul>

8 个答案:

答案 0 :(得分：1)

您正在使用跨越全宽的块元素（p），因此在块元素上使用display:inline属性或仅使用内联元素

＆＃13;
＆＃13; 
ul {
  padding: 0;
  list-style-type: none;
}

#searchImg {
  width: 50px;
  height: 72px;
  white-space: nowrap;
  padding: 0;
  margin: 0;
}

#searchTitle {
  margin-left: 60px;
}

p {
  display: inline;
}
＆＃13; 
<ul id="myUL">
  <li>
    <a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg">
      <p id="searchTitle">A Certain Magical Index</p>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg">
      <p id="searchTitle">Ajin</p>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg">
      <p id="searchTitle">Angel Beats!</p>
    </a>
  </li>
  <li>
    <a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg">
      <p id="searchTitle">Attack on Titan</p>
    </a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

Demo

您必须使用以下内容进行内联。 

ul p {
  display:inline;
}

给你这个：

enter image description here

答案 2 :(得分：0)

display: inline-block

可以帮到你

＆＃13;
＆＃13; 
ul {
  padding: 0;
  list-style-type: none;
}
#searchImg {
	width: 50px;
	height: 72px;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}
#searchTitle {
     margin-left: 10px;
     display: inline-block;
}
＆＃13; 
<ul id="myUL">
	<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg"><p id="searchTitle">A Certain Magical Index</p></a></li>
	<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg"><p id="searchTitle">Ajin</p></a></li>
	<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg"><p id="searchTitle">Angel Beats!</p></a></li>
	<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg"><p id="searchTitle">Attack on Titan</p></a></li>		
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

要将标题与图像对齐，请使用display:inline-block属性。

#searchImg {
    width: 50px;
    height: 72px;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    vertical-align: middle; // align text to middle of image for better view
}
#searchTitle {
    margin-left: 60px;
    display:inline-block;
}

答案 4 :(得分：0)

试试这个

＆＃13;
＆＃13; 
ul {
  padding: 0;
  list-style-type: none;
}
ul li
{
}
#searchImg {
	width: 50px;
	height: 72px;
	white-space: nowrap;
	padding: 0;
	margin: 0;
}
#searchTitle {
	display: inline-block;
  margin-left: 60px;
}
＆＃13; 
<ul id="myUL">
							<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg"><p id="searchTitle">A Certain Magical Index</p></a></li>
							<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg"><p id="searchTitle">Ajin</p></a></li>
							<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg"><p id="searchTitle">Angel Beats!</p></a></li>
							<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg"><p id="searchTitle">Attack on Titan</p></a></li>		
						</ul>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

尝试使用display table to parent和table-cell to child elements 

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <style>
        ul {
            padding: 0;
            list-style-type: none;
        }
        
        ul li a {
            display: table;
            margin-top: 10px;
        }
        
        ul li a img, ul li a p {
            display: table-cell;
            vertical-align: middle;
        }
        
        #searchImg {
            width: 50px;
            height: 72px;
            white-space: nowrap;
            padding: 0;
            margin: 0;
        }
        
        #searchTitle {
            margin-left: 60px;
        }
    </style>
</head>

<body>
    <ul id="myUL">
        <li>
            <a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg">
                <p id="searchTitle">A Certain Magical Index</p>
            </a>
        </li>
        <li>
            <a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg">
                <p id="searchTitle">Ajin</p>
            </a>
        </li>
        <li>
            <a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg">
                <p id="searchTitle">Angel Beats!</p>
            </a>
        </li>
        <li>
            <a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg">
                <p id="searchTitle">Attack on Titan</p>
            </a>
        </li>
    </ul>


</body>

</html>

答案 6 :(得分：0)

<ul id="myUL">
	<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/2/75533.jpg" id="searchImg"><p id="searchTitle">A Certain Magical Index</p></a></li>
	<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/13/77968.jpg" id="searchImg"><p id="searchTitle">Ajin</p></a></li>
	<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/22061.jpg" id="searchImg"><p id="searchTitle">Angel Beats!</p></a></li>
	<li><a href="#"><img src="https://myanimelist.cdn-dena.com/images/anime/10/47347.jpg" id="searchImg"><p id="searchTitle">Attack on Titan</p></a></li>		
</ul>
ul{
  padding: 0;
  list-style-type: none;
}
ul li{
  float: left;
  width: 100%;
}
#searchImg{
    width: 50px;
    height: 72px;
    white-space: nowrap;
    padding: 0;
    margin: 0;
  float: left;
}
#searchTitle{
    margin-left: 60px;
  float: left;
}

答案 7 :(得分：0)

您的代码缺少浮动：左; img 和 p 标记的属性。使用以下给定的CSS作为所需的输出：

{{1}}
相关问题
最新问题