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 - 如何禁用第一行的填充？

php - 防止/限制方法继承
我有一个应用程序，其中许多对象都扩展了一个抽象类，该抽象类定义了诸如 create() edit() retrieve() 和 delete()。由于每个子类对这些函数使用相同的逻辑，抽象类定义了默认
angularjs - 防止$anchorScroll修改url
我正在使用$anchorScroll滚动到页面顶部，其中 html 元素具有 ID #brand。 AngularJS 代码: $location.hash(
Silverlight - 防止 OOB
我想停用我的应用程序中的右键单击，该右键单击提供了在桌面上安装应用程序的选项。我该如何做这样的事情？最佳答案右键单击 Visual Studio 中的项目并选择属性。那里有一个复选框“启用浏览器运
jquery - 防止:hover
我使用 jquery 定位 div，在我的 CSS 中我有一个 div.right-sm:hover{background-color: blue} 我想使用 jquery 停止悬停: $(this
jquery - 防止 'caret'跳转焦点
所以，我正在尝试复制 html5“占位符”属性功能。我目前坚持的一件事是，在获得元素焦点时，插入符号立即出现在输入的开头。就目前情况而言，插入符号出现在用户单击的位置，然后当我使用 jQuery
javascript - php表单刷新再次发送表单(防止)
当表单填写并发送时，如果您刷新页面，它表示表单将再次发送。 (再次提交表格)。防止这种情况发生的好方法是什么？或者终止这个 session ？这方面有什么指导吗？谢谢最佳答案处理完POST信
javascript - 防止@被输入输入字段？
我想阻止 @ 被输入到 input 中。但它不起作用，知道为什么吗？ $(function() { $(document).on('keyup', '[placeholder="x"]', fun
php - 防止 "corruption"
我正在使用 PHP 创建一个应用程序并涉及 MySQL。如果在请求过程中发生错误，我将如何“将查询分组在一起”，检查它是否会成功，然后对真实表进行实际影响。如果对表的实际更新失败，则恢复到更新之前的状
java - 防止/减慢反编译的技术
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Best Java obfuscator ? 对于我的示例，我知道 eclipse 提供了一个反编译插件。而
html - 防止 my::after 阻止我的选择
这是一个演示我的问题的 fiddle :JSFiddle 我正在制作自定义下拉菜单(实际上我使用的是 icomoon 图标而不是 V)...它看起来不错，但是父元素的 ::after 是阻止选择:(
Python:防止 "if"楼梯？
每当我编写需要大量条件的代码时，我都会这样做: if foo: if bar: if foobar: if barfoo: if foobarfoo:
android - 防止/使修补二进制程序集变得困难
我不确定术语是否正确，您可以使用哪些代码实践来使某人难以修改二进制文件/程序集以绕过检查: 例如在源代码中。 bool verificationResult = verify(); if (verif
MySql 防止/跟踪跨多个字段的重复字段
我正在寻找一种简单的方法来检查多个零件表，以确定给定零件号在添加到给定表之前是否已经存在。我目前想到的最好的想法是一个辅助表，它简单地将所有表中的每个 PN 列在一个列中，并带有一个唯一的键；但是我
javascript - 防止 "bubbling"？
这个问题在这里已经有了答案: jquery stop child triggering parent event (7 个答案) 关闭 8 年前。我不确定这是否真的冒泡，我会解释。我有这个:
java - 防止 & 符号转换为 &
我有一个 Spring MVC web 应用程序(不确定该信息是否重要，但它可能是)使用 ModelAndView 将字符串值传递给 JSP 文件。字符串值的形式是: d@.
php - 防止 csrf
我在这里尝试使用表单 key 方法进行 csrf 保护 http://net.tutsplus.com/tutorials/php/secure-your-forms-with-form-keys/
PHP 防止 xss
htmlentities 是防止 PHP 中的 XSS 的最佳解决方案吗？我还想允许像 b、i、a 和 img 这样的简单标签。实现这一点的最佳解决方案是什么？我确实考虑过 bbcode，但发现如果没
java - 防止 'PersistentObjectException'
我有一个非常基本的 JAX-RS 服务(下面的 BookService 类)，它允许创建 Book 类型的实体(也在下面)。 POST负载 { "acquisitionDate": 14188
typescript - 防止 "this"被重写TypeScript编译
我正在使用 Polymer 1.5，我确实需要“this”变量不要映射到外部。我知道 typescript 会为某些人做这件事 valid reasons . declare var Polymer:
python - 防止/改变对类变量的访问
这个问题在这里已经有了答案: Class-level read-only properties in Python (3 个答案) 关闭 6 年前。有没有一种方法可以通过重写实例变量的 __set

首页

博学

6Ren·AI

商城

html - 防止 float right 断线