html - 防止 float right 断线-6ren

html - 防止 float right 断线

转载作者：行者123 更新时间：2023-11-27 23:00:25

34

4

我正在尝试制作一个 html + css 网站，我试图为一个跨度(具有 .float 类)制作一个正确的 float ，但它打破了一条线，我想知道如何防止它打破一个线？我尝试了 display:inline-block 但没有添加，完整代码:

<html>

<head>
<title> Web page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">



</head>
<body> 
<!-- Navbar -->
<nav>
    <a href="">Acceuil</a> <span> | </span>
    <a href="">Types d'appareils</a> <span> | </span>
    <a href="">Ordinateurs</a> <span> | </span>
    <a href="">Telephones</a> <span> | </span>
    <a href="">O.S</a> <span> | </span>
    <a href="">Etudes</a> 

<a href="https://twitter.com/BadisKerdellou" class="fa fa-twitter fa-2x"></a>   
<a href="https://www.instagram.com/badis_kerdellou/?hl=fr" class="fa fa-instagram fa-2x"></a>
<a href="https://www.facebook.com/profile.php?id=100041024162109" class="fa fa-facebook fa-2x"></a>

</nav>
<!-- End of Navbar -->

<div class="header"> 
    <br> <br>
    <span class="pad"> Soufferez vous </span> <br> <br>
    <span class="pad"> De l'utlisation </span>
    <span class="not"> exagirée </span><span class="notn">de l'internet? </span>
    <br> <br> <br> <br>
    <img src="hey2.png">

    <span class="float"> Hey </span>


</div>


</body>
</html>

CSS 代码:

body{
    margin: 0;
    padding: 0;
font-family: 'Raleway', sans-serif;
}
nav{
    background-color: purple;
    height: 55px;
    padding-top: 25px;
    padding-right: 20px;
    border-bottom: 5px solid gray
}

nav a{
    display: inline-block; /*added*/

   text-decoration: none;
    color:white;
    font-size: 20px;
    margin-left: 10px

}

nav span{
    color: white;
    font-size: 15px
}

.fa{
    float: right;
}

.header{
    background-color: purple;
    height: 600px
}

h1{
    padding: 0;
    margin: 0
}

.header h2,h1{
    display: inline-block;
    color: white;
    font-family: 'Raleway', sans-serif;
     margin-left: 20px


}

.pad{
    color: wheat;
    padding-left: 15px;
    font-size: 40px
}

.not{
    color: red;
    padding: 0;
    font-size: 40px
}

.notn{
    color: wheat;
    font-size: 40px
}

.header img{
    height: 300px
}

.float{
    float: right
}

.header span{
    display: inline
}

codepen.io:

https://codepen.io/badis-kerdellou/pen/NWWVpLV

最佳答案

我不确定我是不是笨到连问题都没有发现，但很明显 <br>断线，只需输入 <span class="float"> Hey </span>在 <br> 之前，像这样:

<div class="header"> 

<br> <br>
<span class="pad"> Soufferez vous </span> <br> <br>
<span class="pad"> De l'utlisation </span>
<span class="not"> exagirée </span><span class="notn">de l'internet? </span>
<span class="float"> Hey </span>   <!--Just moved it above the <br>-->
<br> <br> <br> <br>
<img src="hey2.png">

关于html - 防止 float right 断线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59021906/

34

4

0

文章推荐： css - 带有 rotateY 的动画在不同值下看起来相同

文章推荐： Javascript:从另一个文件调用 D3 中的函数

文章推荐： javascript - 使用 ES5 进行 Angular 2 rc.1 测试

文章推荐： html - 如何禁用第一行的填充？

java - 断线 - Android
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 9 年前。 Improve th
按钮标签中的 R Shiny 断线
请参阅以下玩具示例。任何帮助将不胜感激!谢谢! shinyApp( ui = fluidPage( actionButton("btnId", "I want a line break he
java - 如何替换字符串中的 ⁠(断线)？
我收到如下 JSON 响应: Lorem ipsum ¦dolor sit amet 我想做的是替换所有broken bars (|)。我尝试过 .replaceAll("\u00A6", "");
python - 仅使用 OpenCV 检测图像中的虚线(断线)
我正在尝试学习图像特征检测技术。我已经设法检测到水平线(不间断/连续)，但是我无法检测到图像中的所有虚线/断线。这是我的测试图片，你可以看到有虚线和一些文本/框等。到目前为止，我使用了以下代码，
javascript - Html 未按预期呈现 javascript 断线
我有一个 json 文件，其中包含一些文本，其中一些文本可能有一些断线 "surchargeNoteText":"Please note \r \n that pre-payments will ta
html - 防止 float right 断线
我正在尝试制作一个 html + css 网站，我试图为一个跨度(具有 .float 类)制作一个正确的 float ，但它打破了一条线，我想知道如何防止它打破一个线？我尝试了 display:inl
html - nowrap wrapper 内的 div 断线
我有 2 个 float div，我想将它们放在同一行上，它们加起来超过 1024 像素宽，因此它们需要水平窗口滚动，但尽管它们用 white-space:nowrap;

首页

博学

6Ren·AI

商城

html - 防止 float right 断线