HTML CSS解决了这两个问题
HTML CSS解决了这两个问题
提问于 2018-01-08 12:38:01
我们怎样才能在h2中保留所有的样式，在新的一行中有图像和其他行的h2呢?我们可以看到图像和h2都是浮动的，我们希望两者都在不同的行中，请给予适当的说明，以便所有其他程序员也参考和使用那里的代码问题非常简单，必须使用浮点型和h2属性，但不知道在哪里完美，所以请检查并尽快回复，我们已经多次看到这样的问题
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
}
h1, h2
{
background-color: black;
color: white;}
h1{
text-align: center;
}
h2{display:inline-block;
clear: both;}
img{
clear:both;
}<!doctype html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<title>Recipe project - Module 1</title>
</head>
<body>
<h1 id = "top">My favorite Recipes: </h1>
<nav>
<ul>
<li><a href=#first>Panipuri</a></li>
<li><a href=#second>Handvo</a></li>
<li><a href=#third>Dosa</a></li>
</ul>
</nav>
<article>
<h2 id="first">Panipuri</h2>
<img src= "https://qph.ec.quoracdn.net/main-qimg-14f6bc4a3b89ae33a33107a9b56b38e7" alt="delicious pani puri plate" width= 350 title="once you have it you will forget all the items">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>Kothamir Pani</li>
<li>Dates Pani</li>
<li>Puri</li>
<li>Masala Ragda</li>
</ul>
<q>Have it and forget everthing</q>
<p><strong>Steps:</strong></p>
<ol>
<li>Make Masal Ragda</li>
<li>make Kothmir pani</li>
<li>make Dates pani</li>
<li>take Puri and start eating</li>
</ol></article>
<br>
<article>
<h2 id="second">Handvo</h2>
<img src="http://somethingscookingwithalpa.com/wp-content/uploads/2017/11/handvo-WEB.jpg" alt = "handvo plate" width=350 title="handvo really teasty have it">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>1 cup rice</li>
<li>1 cup yellow moong dal</li>
<li>3 cups buttermilk</li>
<li>3-4 green chillies finely chopped</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> Follow the step to have <q> A traditional Gujarati savoury cake. It is made with a combinations of lentils, rice and buttermilk</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li>Take butter milk Add salt, soda and flour, mix well,Keep it aside for 6-7 hours.</li>
<li>Grate bottle gourd and squeeze out excess water,add gourd,coriander,green chillies</li>
<li>Heat oil in a pan,urad & channa dals and seeds,Allow to splutter,pouin the batter and mix it thoroughly.</li>
<li>Check by inserting a skewer,which should come out clean. Slice into wedges and serve hot.</li>
</ol>
</article>
<article>
<h2 id="third">Dosa</h2>
<img src="https://cdn.vox-cdn.com/thumbor/oRMz04HKckdj5s4aPAImXQHJ1d0=/0x0:2808x1872/1200x800/filters:focal(1180x712:1628x1160)/cdn.vox-cdn.com/uploads/chorus_image/image/56417501/Dosa2.1504026967.jpg" alt= "dosa in plate for dinner with chatni" width=350>
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>3/4 cup Parboiled and 3/4 cup Regular Rice</li>
<li>1/2 cup Urad Dal and 1/2 tablespoon Chana Dal</li>
<li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
<li>Water as needed ,Salt to taste,Oil for shallow frying</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> try it <q> All you need is love. But a little dosa doesn’t hurt.</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li> The batter should be fluffy and not very thick. Transfer it to a large container</li>
<li> Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients.</li>
<li> Apply 1-teaspoon oil around the edges of dosa .</li>
<li> Cook until the bottom surface turns light brown and the edges start to come upward.
</li>
</ol>
</article>
<a href=#top > <img id="back-to-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKESsqyheQZhgMM0UMtRe39dEkePwmEL0TPgTwMnpFTZfSLxJh" alt= "back to top image" width=30></a>
</body>
</html>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-01-08 12:49:10
也许你只是想改变
h2{display:inline-block;
clear: both;}
img{
clear:both;
}至
img{
display:block;
}并删除这些<br>标记？
Stack Overflow用户
发布于 2018-01-08 12:46:06
我在你的CSS中没有看到任何float属性。clear: both仅适用于float。您遇到的问题是由于h2上设置的display:inline-block;造成的，因此删除它，一切都应该正常工作。您不需要clear: both
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
}
h1,
h2 {
background-color: black;
color: white;
}
h1 {
text-align: center;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Recipe project - Module 1</title>
</head>
<body>
<h1 id="top">My favorite Recipes: </h1>
<nav>
<ul>
<li><a href=#first>Panipuri</a></li>
<li><a href=#second>Handvo</a></li>
<li><a href=#third>Dosa</a></li>
</ul>
</nav>
<article>
<h2 id="first">Panipuri</h2>
<img src= "https://qph.ec.quoracdn.net/main-qimg-14f6bc4a3b89ae33a33107a9b56b38e7" alt="delicious pani puri plate" width= 350 title="once you have it you will forget all the items">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>Kothamir Pani</li>
<li>Dates Pani</li>
<li>Puri</li>
<li>Masala Ragda</li>
</ul>
<q>Have it and forget everthing</q>
<p><strong>Steps:</strong></p>
<ol>
<li>Make Masal Ragda</li>
<li>make Kothmir pani</li>
<li>make Dates pani</li>
<li>take Puri and start eating</li>
</ol>
</article>
<br>
<article>
<h2 id="second">Handvo</h2>
<img src="http://somethingscookingwithalpa.com/wp-content/uploads/2017/11/handvo-WEB.jpg" alt="handvo plate" width=350 title="handvo really teasty have it">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>1 cup rice</li>
<li>1 cup yellow moong dal</li>
<li>3 cups buttermilk</li>
<li>3-4 green chillies finely chopped</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> Follow the step to have <q> A traditional Gujarati savoury cake. It is made with a combinations of lentils, rice and buttermilk</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li>Take butter milk Add salt, soda and flour, mix well,Keep it aside for 6-7 hours.</li>
<li>Grate bottle gourd and squeeze out excess water,add gourd,coriander,green chillies</li>
<li>Heat oil in a pan,urad & channa dals and seeds,Allow to splutter,pouin the batter and mix it thoroughly.</li>
<li>Check by inserting a skewer,which should come out clean. Slice into wedges and serve hot.</li>
</ol>
</article>
<article>
<h2 id="third">Dosa</h2>
<img src="https://cdn.vox-cdn.com/thumbor/oRMz04HKckdj5s4aPAImXQHJ1d0=/0x0:2808x1872/1200x800/filters:focal(1180x712:1628x1160)/cdn.vox-cdn.com/uploads/chorus_image/image/56417501/Dosa2.1504026967.jpg" alt="dosa in plate for dinner with chatni" width=350>
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>3/4 cup Parboiled and 3/4 cup Regular Rice</li>
<li>1/2 cup Urad Dal and 1/2 tablespoon Chana Dal</li>
<li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
<li>Water as needed ,Salt to taste,Oil for shallow frying</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> try it <q> All you need is love. But a little dosa doesn’t hurt.</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li> The batter should be fluffy and not very thick. Transfer it to a large container</li>
<li> Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients.</li>
<li> Apply 1-teaspoon oil around the edges of dosa .</li>
<li> Cook until the bottom surface turns light brown and the edges start to come upward.
</li>
</ol>
</article>
<a href=#top> <img id="back-to-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKESsqyheQZhgMM0UMtRe39dEkePwmEL0TPgTwMnpFTZfSLxJh" alt="back to top image" width=30></a>
</body>
</html>
Stack Overflow用户
发布于 2018-01-09 03:56:33
向h2标签添加width: 100%;
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
}
h1, h2
{
background-color: black;
color: white;}
h1{
text-align: center;
}
h2{display:inline-block;
clear: both;
width: 100%;}
img{
clear:both;
}<!doctype html>
<html lang= "en">
<head>
<meta charset= "UTF-8">
<title>Recipe project - Module 1</title>
</head>
<body>
<h1 id = "top">My favorite Recipes: </h1>
<nav>
<ul>
<li><a href=#first>Panipuri</a></li>
<li><a href=#second>Handvo</a></li>
<li><a href=#third>Dosa</a></li>
</ul>
</nav>
<article>
<h2 id="first">Panipuri</h2>
<img src= "https://qph.ec.quoracdn.net/main-qimg-14f6bc4a3b89ae33a33107a9b56b38e7" alt="delicious pani puri plate" width= 350 title="once you have it you will forget all the items">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>Kothamir Pani</li>
<li>Dates Pani</li>
<li>Puri</li>
<li>Masala Ragda</li>
</ul>
<q>Have it and forget everthing</q>
<p><strong>Steps:</strong></p>
<ol>
<li>Make Masal Ragda</li>
<li>make Kothmir pani</li>
<li>make Dates pani</li>
<li>take Puri and start eating</li>
</ol></article>
<br>
<article>
<h2 id="second">Handvo</h2>
<img src="http://somethingscookingwithalpa.com/wp-content/uploads/2017/11/handvo-WEB.jpg" alt = "handvo plate" width=350 title="handvo really teasty have it">
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>1 cup rice</li>
<li>1 cup yellow moong dal</li>
<li>3 cups buttermilk</li>
<li>3-4 green chillies finely chopped</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> Follow the step to have <q> A traditional Gujarati savoury cake. It is made with a combinations of lentils, rice and buttermilk</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li>Take butter milk Add salt, soda and flour, mix well,Keep it aside for 6-7 hours.</li>
<li>Grate bottle gourd and squeeze out excess water,add gourd,coriander,green chillies</li>
<li>Heat oil in a pan,urad & channa dals and seeds,Allow to splutter,pouin the batter and mix it thoroughly.</li>
<li>Check by inserting a skewer,which should come out clean. Slice into wedges and serve hot.</li>
</ol>
</article>
<article>
<h2 id="third">Dosa</h2>
<img src="https://cdn.vox-cdn.com/thumbor/oRMz04HKckdj5s4aPAImXQHJ1d0=/0x0:2808x1872/1200x800/filters:focal(1180x712:1628x1160)/cdn.vox-cdn.com/uploads/chorus_image/image/56417501/Dosa2.1504026967.jpg" alt= "dosa in plate for dinner with chatni" width=350>
<br>
<br>
<span><strong>List of Ingredients:</strong></span>
<ul>
<li>3/4 cup Parboiled and 3/4 cup Regular Rice</li>
<li>1/2 cup Urad Dal and 1/2 tablespoon Chana Dal</li>
<li>1/4 teaspoon Fenugreek Seeds (methi dana)</li>
<li>Water as needed ,Salt to taste,Oil for shallow frying</li>
<li>3 Tbsp coriander chopped</li>
</ul>
<p> try it <q> All you need is love. But a little dosa doesn’t hurt.</q></p>
<p><strong>Steps:</strong></p>
<ol>
<li> The batter should be fluffy and not very thick. Transfer it to a large container</li>
<li> Take all the ingredients to prepare the dosa batter. Rice, urad dal and fenugreek seeds are the main ingredients.</li>
<li> Apply 1-teaspoon oil around the edges of dosa .</li>
<li> Cook until the bottom surface turns light brown and the edges start to come upward.
</li>
</ol>
</article>
<a href=#top > <img id="back-to-top" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSKESsqyheQZhgMM0UMtRe39dEkePwmEL0TPgTwMnpFTZfSLxJh" alt= "back to top image" width=30></a>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48144296
复制相关文章
相似问题
腾讯云开发者
