div 内的左/右浮动按钮

2024-04-14

如何让按钮只浮动在div区域?

这是我的 CSS 和 HTML 示例。

.test {
  width: 60%;
  display: inline;
  overflow: auto;
  white-space: nowrap;
  margin: 0px auto;
}
<div class='test'>
  <div style='float: left;'>
    <button>test</button>
  </div>
  <div style='float: right;'>
    <button>test</button>
  </div>
</div>

我希望它是这样的。


将 display:inline 更改为 display:inline-block

.test {
  width:200px;
  display:inline-block;
  overflow: auto;
  white-space: nowrap;
  margin:0px auto;
  border:1px red solid;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

div 内的左/右浮动按钮 的相关文章

  • Flexbox 的行之间可以有一条线吗?

    我有一个水平导航 它有点长 需要重新排列以适应狭窄的显示 我使用 flexbox 使其重排成多行 但行数较多时 导航项之间的划分就不那么明显了 我尝试在顶部给它们一个边框 它有点有效 但当然 边框仅在各个导航选项上可见 而不是在所有 Fle
  • 如果在 中执行 document.write,为什么 DHTML 行为在 IE8 中不起作用?

    我们有一个 3rd 方 Web 应用程序 可以在 IE6 中运行 但不能在 IE8 中运行 示例代码如下 在IE6中会弹出 message from htc 消息 但在IE8中不会弹出 测试 html
  • 自动调整Google网站嵌入代码的高度(html)

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协
  • 如何在Eclipse中集成CSS预处理? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想在 Eclipse 中编辑 SCSS 文件 最好使用语法突出显示 scss files 我发现这些资
  • CSS3DObject 始终位于 WebGL Mesh 前面

    我正在混合CSS3D Renderer with WebGL Renderer to add HTML3D 空间中的元素WebGL场景 这CSS3DObject在前面WebGL网格即使WebGL Renderer具有较高的 z index
  • 使用日语“Enter”键进行搜索功能

    我在日语方面遇到了问题 我有一个允许用户搜索数据的表单 当用户输入要搜索的字符串并按 Enter 键时 搜索功能就会执行 我的代码是 formSearch input keyup function event var key event c
  • 如何删除flexbox中所有换行行的左右边距(没有nth-child或js)

    我正在寻找一种好方法来删除每行中每个第一个和最后一个项目的左右边距 而不使用 nth child 或 JavaScript 如果这是不可能的 那么我想下一个最好的方法是在主弹性盒元素上设置负左 右边距 但我不太确定使用弹性盒来做到这一点的最
  • Twitter bootstrap:居中缩略图

    我有一个缩略图列表 它们有固定的尺寸 我希望连续缩略图的数量随着窗口的宽度而变化 使用 Twitter Bootstrap 这很容易 http jsfiddle net charlesbourasseau 5WvAL http jsfidd
  • 更快地开发和测试打印样式表的方法(避免每次都进行打印预览)?

    这是我现在的流程 保存对 print css 的更改 打开浏览器并刷新页面 右键单击并选择 打印 gt 打印预览 Firefox 但实际上是任何浏览器 第三步让我烦恼 我想知道是否可以通过插件或其他东西将其从流程中删除 只需选择以打印媒体形
  • 如何仅在 css/html 中强制在单词之间换行?

    我只有一段普通的文本 p 标签内的 p div 标签 但只有 Firefox 可以正确显示 Firefox 打破了单词之间的界限 所有其他浏览器都会在单词中间断行 这使得阅读变得困难 这是我的意思的一个例子 火狐浏览器 工作中 This w
  • 如何向 Rails 应用程序添加自定义字体?

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底
  • 同页锚链接到部分 id 在 IE8 中不起作用

    我有一个带有导航的单页 HTML5 网站 可以将用户引导至该部分 在除 IE8 之外的所有浏览器中都可以正常工作 IE8 不执行任何操作 我所拥有的虚拟版本 a href about About a a href work Work a a
  • 淘汰赛绑定,每个都可进行自定义

    我这里有一个情况 用于淘汰每个带有定制的绑定 这是我的代码 div div table tbody tr td td td td tr tbody table div div
  • 当百分比填充定义元素高度时忽略 max-height

    The max height当内部填充大于最大高度值时 属性值似乎被忽略 例如 在元素上设置此类会导致最大高度被忽略 max height ignored height 0 or auto makes no difference max h
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • HTML 元素的默认背景颜色是什么?白色还是透明?

    我只是被一个简单的问题困住了 想弄清楚 HTML 元素的默认背景颜色是什么 是白色的还是透明的 默认背景颜色是透明的 看这里 https developer mozilla org en docs Web CSS background co
  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714
  • 如何使用Python保存“完整的网页”而不仅仅是基本的html

    我正在使用以下代码来使用 Python 保存网页 import urllib import sys from bs4 import BeautifulSoup url http www vodafone de privat tarife r
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht

随机推荐