所以我正在创建一个带有两个按钮的代码编译器:
运行并下载。但不是使用 <button>
标签,我使用 <div>
标签,这样我的按钮就可以有更多种类的 CSS 样式。但问题是,当我尝试通过复制和粘贴 RUN 按钮中的相同代码来创建第二个按钮时,当我需要它们在同一行时,DOWNLOAD 按钮位于 RUN 按钮下方。
所以,我添加了 display: inline;
样式,但这只是搞砸了一切,div 的样式不起作用。唯一有效的样式是 div 按钮中的文本样式,以及将文本居中放置在页面中间的样式。
这是代码:
.dbutton,
.button {
background-color: red;
margin-right: 300px;
box-shadow: 0px 0px 5px gray;
font-size: 20px;
color: blue;
text-align: center;
width: 100px;
height: 50px;
}
.btn-text {
margin-top: 10px;
padding-top: 12px;
}
.dbtn-text {
margin-top: 10px;
padding-top: 12px;
}
.dbutton:hover,
.button:hover {
background-color: white;
-webkit-user-select: none;
}
.dbutton:active,
.button:active {
background-color: #00ad08;
}
div {
display: inline;
}
<div class="button">
<p class="btn-text">
Run >>
</p>
</div>
<div class="dbutton">
<p class="dbtn-text">
Download ↓
</p>
</div>
如果你想要完整的代码,这里是链接。
JSFIDDLE
这两个 div 没有样式,按钮中的文本位于页面中间。我需要两个 div 并排放置,这样样式才能起作用。请帮助我!
最佳答案
.btn-bar {
position:relative
/* ... */
}
.btn {
float:left;
background:red;
width:7em;
padding:11px 3px;
margin:3px;
text-align:center;
text-transform:uppercase;
box-shadow:0 0 3px 0 #000;
}
<div class="btn-bar">
<div class="btn">run</div>
<div class="btn">compile</div>
</div>
关于html - 当我添加显示 : inline; 时,CSS 无法处理 2 个 DIV 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56121505/