html - 无法在 div 旁边对齐按钮-6ren

html - 无法在 div 旁边对齐按钮

转载作者：行者123 更新时间：2023-11-28 00:46:41

25

4

我可以让按钮 div 右对齐。但我无法在 div 的中间获取它。请让我知道我做错了什么。我试过垂直对齐，但似乎仍然无济于事。

谢谢。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">


.glow {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
color:#000000;
background-color: rgba(255,255,255,1);
padding: 15px;
display: inline-block;
text-align: left;
border-left-width: 3px;
border-left-color: aqua;
border-left-style: inset;
width: 90%;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 10px 
rgba(82, 168, 236, 0.6);
}

.button{
    width:20%;
    padding-bottom:24px; 
    float:right;
    vertical-align: middle;
}

</style>
</head>

<body>
<div class="glow">
<div style="width: 70%;" class="mktoText" mktoname="Text" id="text2">
                                            <p>Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim 
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat.</p>
                                          </div>
<div class="button">BUTTON HERE</div>

</div>


</body>
</html>

最佳答案

查看 flexbox你再也不用担心这样的事情了:

.glow {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
        -ms-flex-pack: distribute;    
    justify-content: space-around;

    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    color:#000000;
    background-color: rgba(255,255,255,1);
    padding: 15px;
    text-align: left;
    border-left-width: 3px;
    border-left-color: aqua;
    border-left-style: inset;
    width: 90%;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 10px 
    rgba(82, 168, 236, 0.6);
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 10px 
    rgba(82, 168, 236, 0.6);
}

.button{
    width:20%;
}

<div class="glow">
   <div style="width: 70%;" class="mktoText" mktoname="Text" id="text2">
       <p>Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod 
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim 
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit 
lobortis nisl ut aliquip ex ea commodo consequat.</p>
   </div>
<div class="button">BUTTON HERE</div>

</div>

关于html - 无法在 div 旁边对齐按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53492372/

25

4

0

文章推荐： html - 溢出 : auto; not working for my navbar

文章推荐： javascript - 博览会/ react native : Video Failing to Resize

文章推荐： php - 根据 Woocommerce 中的特定用户 Angular 色显示菜单项

css - 将内容放在 h1 旁边
我想在下面添加按钮标签，但不知道使用什么 CSS 来实现。下图显示了一个可能的场景，“Main_Page”标题和按钮构成了一个单独的 div 的每个部分。我尝试使用 margin-top属性，但想
html - 图像不会出现在 slider 旁边
我的图像不会位于 slider 旁边.. 而只是堆叠在 slider 下方。好像没有空间放置图像，因为 slider 占用了太多空间，但是当我查看代码时，情况似乎并非如此，除非我错过了什么:) Thi
html - 如何将按钮放在另一个按钮的(右侧)旁边
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题吗？通过 editing this post 添加细节并澄清问题. 关闭 6 年前。 Improve
html - 如何将图像放在文本 CSS 旁边
我想在文本的左侧放置一个图像，并根据窗口的分辨率保持原样。这是没有图像的样子:http://prntscr.com/fmky4f 这是我希望它放置后的样子。 https://prnt.sc/fmkk
javascript - 滚动时弹出模型隐藏在 body 旁边？
我创建了一个button，当我点击button然后popup模型显示时，它会隐藏在页面主体旁边，按钮也会隐藏我滚动。我希望当弹出窗口出现时我无法滚动我的页面主体。我使用 Bootstrap 创建了模型
html - 如何将文本放在 div 旁边？
我是一名学生网络开发人员，需要一些帮助。我需要复制这个 wikipedia page尽我所能我想把 Story 和下面的 div 放在官方 wiki 页面上的位置。另一个问题是游戏玩法“div”，
html - 如何将菜单放在 Logo 旁边？
需要这项工作的 header 的屏幕截图: 如您所见，菜单位于 Logo 下方。我想要它旁边的菜单，在 Logo 的右侧。我不知道这是否可行，但如果可行，我需要一些帮助，谢谢。这是所有内容的代码，为
css - 如何使文本填充由具有负左边距的图像(旁边)创建的空白？
基本上，我们必须有这样的布局，其中图像必须溢出容器，文本填充图像创建的空间(向左偏移)。我们目前有这样的结构: Some paragraph
html - 偏移滚动条出现在子 div 旁边
我有一个“弹出式”表格，它是一个固定元素。该表有时太高以适应某些屏幕，因此我将 overflow 设置为 auto。然而，滚动条似乎与弹出表格分离，因为父 div 是屏幕的宽度而表格较小。有没有办法让
css - 如何将图像放在 div 旁边
我有一个带有边框的 div: 表示上面内容的div使用的样式是这样的: const style = { textAlign: "center", mar
html - 将图像完美地放在 div 旁边
如何在各种屏幕尺寸下完美地放置图像？ .background-login { background: url(../img/login.png) no-repeat; background-s
android - Flutter:将图标放置在居中的 CircleAvatar 旁边
我正在尝试在居中的圆形头像旁边的右上角放置一个编辑图标。但是，如果我在行小部件中使用中心小部件，它就不起作用: Row( children: [
ios - 将单元格名称传递给 View Controller 旁边
首先，感谢您阅读我的问题! 因此，我遇到了一些有关将单元格名称传递到下一个 View 的问题。现在它会传递它，但只会显示最近加载的单元格。现在的编程方式如下: var passName = "" v
css - 将文字移到 Logo 旁边；摆脱硬性规定
这是网站:www.red-tuxedo.com 我希望“红色燕尾服”文本位于 Logo 旁边，而不是下方，并且我想摆脱贯穿 Logo 的硬性规定。我的 CSS/HTML 技能达不到要求。当我更改文本时
css - 水平菜单，位置固定，div 旁边
我有一个顶部水平菜单栏，宽度为 100%，居中对齐，位置固定，因此它不会随页面滚动。但我还想在菜单左侧的菜单内联一个名称(例如名为 test)。但即使我使用内联 block ，它也会根据左侧的 d
html - div 漂浮在居中的 div 旁边？
我有一个 4 个链接。我希望他们都在同一行。其中两个在中间，另外两个在右边。我把它们包了两个又两个，但我无法让它工作。我的 CSS 是这样的: #links_center { } #links_ri
javascript - 网格元素不在彼此 Material UI 旁边
我在 material-ui 中使用 Grid 组件。我无法让网格元素相互堆叠。现在他们正在彼此堆叠。我不确定是什么让它们堆叠在一起。我已经这样做了，所以只有在小屏幕上网格元素才会堆叠在一起，否则每个
html - 将按钮放在内联 block div 旁边
我试图在固定宽度的内联 block div 旁边放置一个按钮。但它就在 div 的下面。我试过减少容器的宽度，但这是行不通的。我想在不将类添加按钮放在单独的容器中的情况下完成此操作。该按钮应位于 .i
html - 将图像放置在 div 旁边(聊天气泡)
我在“聊天气泡”旁边有一个用户的图像，但该图像显示在气泡之后。我如何将图像放在聊天气泡之前并固定在 div 上？我的代码在这里:http://www.codepen.io/anon/pen/fFx
html - 将图像放在 Navbar Bootstrap 旁边
编辑 #1:这是问题的图片: 编辑 #2:这是我使用品牌类后的图片编辑#3: 我正在尝试将图像 float 到导航栏旁边。它一直有效，直到我的导航栏宽度达到 100%。然后导航栏位于图像下方。这是

首页

博学

6Ren·AI

商城

html - 无法在 div 旁边对齐按钮