html - CSS- float 权利不起作用-6ren

html - CSS- float 权利不起作用

转载作者：太空宇宙更新时间：2023-11-04 01:54:30

24

4

我正在尝试用 HTML 和 CSS 为网站编写导航栏。我在右侧有一张我想要的 Twitter 图标图片。我尝试在图像及其包含标签上使用 float:right。谁能告诉我该怎么做？这是我的代码:

body {
  margin: 0;
  padding: 0;
  font-family: "Arial";
}

header {
  height: 60px;
  width: 100%;
}

.nav {
  display: flex;
  height: 60px;
  width: 100%;
  vertical-align: middle;
  box-shadow: 0 0 0 2px #C3C3C3;
  position: absolute;
}

img.logo {
  height: 50px;
  width: 50px;
  margin: 0 20px;
}

ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFF;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 21px 16px;
    margin: 0 10px;
    text-decoration: none;
    color: #7D848E
}

li a:hover {
    background-color: #111;
}

img.twitter {
  height: 40px;
  width: 40px;
  margin: 10px 10px;
}

a.twitter {
  display: block;
  float: right;
}

  <body>

    <div class="nav">
      <a href="#">
        <img class="logo" src="/static/arch.png">
      </a>
      <ul>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
      </ul>
      <a class="twitter" href="http://www.twitter.com">
        <img class="twitter" src="/static/twitter.png">
      </a>
    </div>

  </body>

最佳答案

您可以将 flex 元素与 auto 边距对齐，类似于将 block 级元素与定义的宽度对齐。在这种情况下，您只想提供 Twitter 链接 margin-left: auto，可用空间将占用该自动边距。您可以在此处的规范中阅读有关 flex 布局的自动边距的更多信息 - https://www.w3.org/TR/css-flexbox-1/#auto-margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

body {
  margin: 0;
  padding: 0;
  font-family: "Arial";
}

header {
  height: 60px;
  width: 100%;
}

.nav {
  display: flex;
  height: 60px;
  width: 100%;
  vertical-align: middle;
  box-shadow: 0 0 0 2px #C3C3C3;
  position: absolute;
}

img.logo {
  height: 50px;
  width: 50px;
  margin: 0 20px;
}

ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFF;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 21px 16px;
    margin: 0 10px;
    text-decoration: none;
    color: #7D848E
}

li a:hover {
    background-color: #111;
}

img.twitter {
  height: 40px;
  width: 40px;
  margin: 10px 10px;
}

a.twitter {
  margin-left: auto;
}

  <body>

    <div class="nav">
      <a href="#">
        <img class="logo" src="/static/arch.png">
      </a>
      <ul>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
        <li><a href="#">ITEM</a></li>
      </ul>
      <a class="twitter" href="http://www.twitter.com">
        <img class="twitter" src="/static/twitter.png">
      </a>
    </div>

  </body>

关于html - CSS- float 权利不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42840114/

24

4

0

文章推荐： python - 如何使用模零找到给定值的最近除数

文章推荐：在c编程中对 "zombie processes"感到困惑

文章推荐： c - 为 socket recv TCP 设置超时

文章推荐： python - 连续2次403后如何获取IP地址

iPhone 构建错误(权利)
我在尝试构建时遇到此错误:应用程序代码签名权利文件中指定的权利与配置配置文件中指定的权利不匹配。 (0xE8008016)。这不是我第一次构建应用程序。这将是我的第六个应用程序，所以这个东西正在绊倒
iOS 越狱控制台应用程序，权利
这个问题在这里已经有了答案: How do I change my iOS applications' entitlements? (2 个答案) 关闭 8 年前。我在越狱的 iPhone 上运行
ios - NetworkExtension - 权利
我有一个 PacketTunnelProvider 应用程序扩展，带有一个包含 key 的 plist NSExtensionPointIdentifier NSExtensionPr
swift - 缺少 CloudKit 权利
我想在我的应用程序中实现 CloudKit，但是我无法将它添加到我的项目中。大多数教程都是在较旧的 Xcode 版本(我假设)中制作的，其中有一个 iCloud 开关 - 在我的项目(Xcode 1
ios - 如何获得 NeHotspotHelper 权利
我已经像他们说的那样提交了这个表格 https://developer.apple.com/contact/network-extension/ 然后我收到了苹果的邮件 Please note tha
c# - Windows 如何解决冲突的文件系统权限/权利？
在Windows的安全体系中，一个用户可以属于多个组，一个组又可以包含其他的组。在 Windows 中解决权限冲突的“规则”是什么？例如，假设用户在 A 组和 B 组中。A 组对文件具有“拒绝读取”
ios - 缺少 HealthKit 权利
我正在尝试将 HealthKit 与我正在构建的应用程序集成，我似乎已经成功地为它添加了权利。我已经创建并下载了一个具有适当应用程序 ID 的配置文件，Xcode 功能选项卡中的 HealthKit
java - Java 程序的 wso2 权利
wso2 身份服务器已安装并正在运行。我能够在其中创建策略并测试一个简单的场景。这里面似乎有很多连接部分。尚不清楚如何从 Java 程序访问策略并以编程方式传递角色、资源并检查登录用户是否有权执行特
iphone - 权利 'application-identifier' 具有配置文件不允许的值 - TestFlight
我知道有人提出了有关以下错误的问题:权利“应用程序标识符”具有配置配置文件不允许的值，但是，没有一个解决方案可以解决我的问题。情况是这样的:我有一个可以下载文件的应用程序，并且在开发模式下运行良好。当
xcode - 如何为 Finder 设置 AppleScript 权利？
我需要在启用了沙箱的应用程序中使用 AppleScript。只是使用诸如“告诉 Finder bla-bla-bla”之类的东西。很简单。我知道我需要在 Entitlements 中为 finder
ios - 关于对用户保留未加密消息的权利(iOS 和 Appstore 权利)
我有一个涉及消息传递的应用程序(它是应用程序的重要组成部分)。人们可以通过应用程序互相发短信，每条消息都保存在我们的服务器上，未加密。 (我们从来没有真正想过加密它) 用户在创建帐户时必须接受条款，所
ios - 在 iTunes 连接中检查二进制详细信息时的 "Incorrect"权利
我最近上传了一个应用程序到苹果商店，它的当前状态是等待审核。我正在检查二进制细节以检查一切是否正确，但我读到一些让我担心的东西。在权利部分我有以下内容: 获取任务允许:假钥匙串(keychain
ios - 缺少 "aps-environment"权利。注册失败
我已经为 iOS 10 苦苦挣扎了几天。我有一个使用 Xcode 7.3 构建的 iOS 8 和 iOS 9 应用程序。推送工作正常。我更新了一些东西并发布了使用 XCode8.3 编译的应用程序。
php - 在 Ubuntu/Linux 上正确赋予所有权/权利
我目前在授予 Zend Server 上的权利/所有权方面遇到了很多问题。我总是做一个 chown user -R path/to/file 和 giving 777 to fodlers and f
ios - 分发配置文件不包括 get-task-allow 权利
在我的项目中，我有三个目标 - 项目目标、单元测试目标和 UI 测试目标。在升级到 Xcode 8 时，我遇到了 UI 测试目标的问题，并显示了错误消息: Provisioning profile
xcode - XCode 4.2.1 上的临时分发 - 权利
我正在尝试为临时分发(在 TestFlight 上)构建我的应用程序。我已通读所有说明并进行了大量网络搜索。我的问题是如何在 Xcode 4.2.1 上创建 entitlements.plist 所有
ios - 应用签名的权利不包括“aps-environment”权利。是的，它确实
Havind向我的应用程序添加了推送通知，我在上传二进制文件时收到此消息 app signature's entitlements do not include the "aps-environmen
macos - 哪个版本的 Mac OS X 首次包含临时异常(exception)权利？
我知道沙箱是在 Mac OS X Lion (10.7) 中引入的，但临时异常权利，特别是 com.apple.security.temporary-exception.files.home-rela
ios - 获取错误 : Missing com. apple.developer.healthkit 权利
我创建了一个 ios 应用程序，它使用 healthkit 功能将健康相关数据获取到我的 ios 应用程序。嗯，我的应用程序在模拟器和 iPhone 设备上运行良好。但是，当我创建 ios 应用程序的
ios - "com.apple.OMC"是什么 iOS 功能/权利？
com.apple.OMC:这是什么？为什么启用它以及如何禁用它？最佳答案苹果支付。在这个项目中找到它，它是 Xcode 中 Capabilites 页面上唯一启用的东西:https://gith

首页

博学

6Ren·AI

商城

html - CSS- float 权利不起作用