Question

我想在嵌入的视频和图片之间放一个列表，我不确定该怎么做。任何和所有的帮助将不胜感激。如果我做了一些不正确的问题，请告诉我。

谢谢

<!DOCTYPE HTML>
       
<html>
<head>
	<meta charset="utf-8" />
	<title> Yui </title>
	<style type="text/css">
		h1,h2,h3,h4,h5,h6 {color:green; text-align:center;}
	    p {color:green;}
        a {color:green; text-align:center}
	    hr {height:4px; background-color: black;width:100%;}	
	</style>
</head>
<body>
	
	<h1> Yui </h1>
	
	<hr>
	
	<h2> <a href="http://www.yui-lover.com/">Yui's Fanpage <a>
	&nbsp|
	<a href="https://en.wikipedia.org/wiki/Yui_(singer)">Yui's Wiki </a>
	&nbsp|
	<a href="https://www.facebook.com/YUI.net.International?fref=ts"> Yui's Facebook </a>
	</h2>
	
	<hr>
	
	<p>
	<a href="http://n-jinny.com/wp-content/uploads/2013/11/YUI1.jpg">
	<img style="float:right; border-color: transparent" src="http://n-jinny.com/wp-content/uploads/2013/11/YUI1.jpg" width="900" height="450" alt="Yui" > </a>
		YUI is a Japanese singer-songwriter and J-pop/J-rock artist, born March 26, 1987 in Fukuoka, Japan. She sings, plays the acoustic guitar, and writes her own songs. YUI has written a vast number of theme/tie-up songs for popular Japanese drama/film, anime and commercial productions. She is the second female in Japanese music history that has achieved a record of four consecutive No 1. Singles since J-pop star, Utada Hikaru. She is currently signed with Gr8! Records Label, a sublabel under Sony Music Entertainment (Japan).
				
	</p>
	
	<iframe width="560" height="315" 
	src="https://www.youtube.com/embed/JmWf--kr4UQ" frameborder="0" allowfullscreen>
	</iframe>
	
	<ul style="list-style-type: circle">
       <li>Goodbye Days </li>
       <li>Again </li>
       <li>Life </li>
    </ul>

	
	<hr>
	
	
</body>
</html>

Answer 1

以下是您所做的一般概念：

<强> HTML

<p class="clearfix">
  test
  <img src="http://placehold.it/350x150">
</p>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<iframe></iframe>

<强> CSS

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
img {
  float: right;
}

Code Pen

说明：

p是块级元素，因此它将占据整个宽度，下一个元素将显示在其下方。 ul也是一个块级元素，因此它也将占据整个宽度，下一个元素将显示在它下面。 iframe是内联元素，但由于它的父级是块级别，因此它将显示在其下方。

如果您在没有clearfix的情况下运行我的代码，它将无法运行。 ul不会出现在图片下方。这是因为p的高度并不反映img（位于p内）的高度。这是一个众所周知的问题，所以我会把你推荐给那些能够比我更好地解释它的人。可以这么说，使用clearfix将为您提供所需的结果。

切向建议：

修复缩进和样式。有关样式指南，请参阅here。请参阅here以获取Stack Overflow中的帮助格式。
http://sscce.org/对于如何提出问题以便人们可以更轻松地帮助您提出了很好的建议，因此其他人会发现您的问题很有用。人们经常使用Code Pen's来展示他们的SSCCE。
如果你想要超越一点，勾勒出你想要的东西并将其添加为图像将非常有用。我为此使用Sketch，并在适当时使用LiceCap截取屏幕截图和GIF。编辑：您的代码片段可以直观地显示您想要的内容。
我认为http://learn.shayhowe.com/是HTML / CSS的绝佳资源。

需要帮助定位在HTML中

1 个答案: