CSS float ul 列表和段落答案

【问题标题】：CSS float ul lists and paragraphsCSS float ul 列表和段落
【发布时间】：2017-01-10 17:36:40
【问题描述】：

我尝试这样做http://prntscr.com/cdbzsu，但看起来我对 css float 不太擅长:(。

我试着看别人的教程，但还是不行。

请有人帮忙。

这是我到目前为止所做的。

.edit-text {
  font-size: 13px;
}
.edit-text p {
  width: 100%;
}
.edit-text ul {
  float: left;
}
.edit-text ul li {
  list-style: circle inside;
}
.edit-text img {
  float: right;
  width: 102px;
  height: 130px;
}
.edit-text a {
  clear: both;
  background-color: #002B0F;
  color: #FFFFFF;
  padding: 3px 15px;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="edit-text">
		<p>Vous-voulez nous consulter pour vous aider à réviser votre vitrine commerciale?</p>
		<p>Ce service inclut: </p>
		<ul>
			<li>La révision</li>
			<li>La mise en page de la vitrine commerciale</li>
			<li>La correction et l’adaptation de mots clés pour le SEO</li>
			<li>Service payant</li>
		</ul>
		<a href="#" title="Click here">Cliquez ici pour envoyer la demande de consultation</a>
		<img src="http://www.holidaymood.com/images/ContactGirl.png" alt="Image">
	</div>
</body>
</html>

【问题讨论】：

您的实际问题/问题是什么？
我无法像快照图像中那样排列文字和照片
我提供了一个更能代表你的问题的sn-p：结果

标签： html css image list css-float

【解决方案1】：

将img 移到green 文本上方并使用以下命令清除浮动：

<div style="clear:both;"></div>

在img 标记之后，我认为您可以将其从此处向前移动。干杯！

.edit-text {
  font-size: 13px;
}
.edit-text p {
  width: 100%;
}
.edit-text ul {
  float: left;
}
.edit-text ul li {
  list-style: circle inside;
}
.edit-text img {
  float: right;
  width: 102px;
  height: 130px;
}
.edit-text a {
  clear: both;
  background-color: #002B0F;
  color: #FFFFFF;
  padding: 3px 15px;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="edit-text">
		<p>Vous-voulez nous consulter pour vous aider à réviser votre vitrine commerciale?</p>
		<p>Ce service inclut: </p>
		<ul>
			<li>La révision</li>
			<li>La mise en page de la vitrine commerciale</li>
			<li>La correction et l’adaptation de mots clés pour le SEO</li>
			<li>Service payant</li>
		</ul>
		<img src="http://www.holidaymood.com/images/ContactGirl.png" alt="Image">
        <div style="clear:both;"></div>
		<a href="#" title="Click here">Cliquez ici pour envoyer la demande de consultation</a>

	</div>
</body>
</html>

【讨论】：

虽然此解决方案有效，但与他为结果提供的图像相比，图像未正确对齐，可点击链接也未对齐。最简单的方法是按照我下面显示的方式进行。
@Ricky 问题是关于处理浮点数...如果你对我投了反对票，那很可悲:(
是的，他的问题是关于浮点数的，因为他的做法是错误的，他正试图使用浮点数来实现他的“想要的结果”，这在对齐的意义上是行不通的，因为他的结果。他希望它看起来如何的屏幕截图。以你的名声，我原以为你会专注于他想要的结果。这就是首先提出这个问题的原因。他走错路可能不是他的错，你至少可以尝试“帮助”这个人，而不仅仅是“回答问题”，从长远来看不会帮助他。跨度>
在这种情况下，您应该对问题发表评论并让 OP 知道...您应该与 OP 交谈并说服他我的回答不应该被接受，您不应该告诉我这个我猜：D
我已经向他发送了一个编辑请求，由他决定接受与否，而你说我对你的投票感到难过......

【解决方案2】：

我有一个更简单的解决方案，可以让它看起来与您在该图像上的描绘方式完全相同（减去红色文字）。冒昧为您提供了一个codepen。

http://codepen.io/Ballard/pen/ambGQA

虽然 Kukkuz 的回答似乎解决了您正在尝试做的事情，但它涉及准确指定 HTML 中的样式，而不是在您的 CSS 表上使用它，您在尝试正确对齐图像和可点击链接时也会遇到问题.看看下面我的 sn-p，以获得更简单更好的解决方案。

.edit-text {
  font-size: 13px;
  width: 490px;
  background-image: url(http://www.holidaymood.com/images/ContactGirl.png);
  background-repeat: no-repeat;
  background-position: 350px 40px;
  background-size: 100px 115px;
}
.edit-text p {
  width: 100%;
  margin: 0 auto;
}

.edit-text ul li {
  list-style: circle inside;
}
.edit-text a {
  background-color: #002B0F;
  color: #FFFFFF;
  padding: 3px 15px;
}

<div class="edit-text">
		<p>Vous-voulez nous consulter pour vous aider à réviser votre vitrine commerciale?</p>
		<p>Ce service inclut: </p>
		<ul>
			<li>La révision</li>
			<li>La mise en page de la vitrine commerciale</li>
			<li>La correction et l’adaptation de mots clés pour le SEO</li>
			<li>Service payant</li>
		</ul>
		<a href="#" title="Click here">Cliquez ici pour envoyer la demande de consultation</a>
	</div>

【讨论】：