个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 freeCodeCamp，目前正在对一个网站进行逆向工程。然而，类(class)没有涵盖太多的一件事是定位元素，尤其是将它们居中。我无法让我的按钮看起来像示例元素。我不确定如何将标签居中放在按钮上方，然后在当前值的左侧和右侧添加加号和减号按钮。我可以看到示例中的代码，但我只是不明白它的作用是什么以及它最终如何很好地居中所有内容。这是我想要的效果: http://codepen.io/GeoffStorbeck/pen/RPbGxZ/
这是我的代码: http://codepen.io/Dordan/pen/GpVvXm
HTML:
<div class="session">
<div class="col-xs-3">
</div>
<div class="col-xs-6">
<div class="break">
<h6>BREAK LENGTH</h6>
<button class="clock-button" id="minusBreakTime">
-
</button>
<h2>0</h2>
<button class="clock-button" id="addBreakTime">
+
</button>
</div>
<div class="session">
<h6>SESSION LENGTH</h6>
<button class="clock-button" id="minusSessionTime">
-
</button>
<h2>0</h2>
<button class="clock-button" id="addSessionTime">
+
</button>
</div>
</div>
<div class="col-xs-3">
</div>
</div>
CSS:
.content {
margin: auto;
width: 75%;
text-align: center;
}
.clock-button {
border: none;
background: none;
}
.section {
display: inline-block;
margin: auto;
}
.breakB {
}
.sessionB {
}
最佳答案
我的尝试:http://codepen.io/anon/pen/GpVwBK
您走在正确的轨道上，但如果您对特定 HTML 元素或 CSS 属性的工作原理感到好奇，我建议您在 MDN 上查找它。 .他们的文档非常全面且易于阅读。
至于您要实现的目标，您似乎无法让元素并排显示。很快我想到了两种方法来实现这一点:display: inline-block 和 float: left。两者非常相似，但 display: inline-block 有一个额外的好处，您可以使用 vertical-align: middle 使元素很好地垂直对齐，所以我将使用对于这个例子:
<html>
<head>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lemon" />
</head>
<body>
<div class="container-fluid content">
<h2 class="title">Pomodoro Clock</h2>
<div class="session">
<div class="col-xs-3">
</div>
<div class="col-xs-6">
<div class="break">
<h6>BREAK LENGTH</h6>
<div class="btns-container">
<button class="clock-button" id="minusBreakTime">-</button>
<h2>0</h2>
<button class="clock-button" id="addBreakTime">+</button>
</div>
</div>
<div class="session">
<h6>SESSION LENGTH</h6>
<div class="btns-container">
<button class="clock-button" id="minusSessionTime">-</button>
<h2>0</h2>
<button class="clock-button" id="addSessionTime">+</button>
</div>
</div>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
</body>
</html>
我将按钮包装在新的 div 中，btns-container，这样我就可以在 display: inline-block 中制作所有内容:
.btns-container > * {
display: inline-block;
vertical-align: middle;
}
.session .session,
.session .break {
display: inline-block;
}
我还使 session 和 break 容器并排放置。
希望这对您有所帮助。
关于html - 如何正确定位元素并布置页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34009803/
25
4
0
首先，这或多或少是我的第一个 GUI，而且我学习 Java 的时间不超过一周，因此它可能包含一些严重的编程错误。 我现在拥有的是:按钮和标签是 OptionPanel 的一部分，位于左侧，Drawin
当窗口大小调整时，Windows 会发送几条消息: WM_GETMINMAXINFO WM_ENTERSIZEMOVE WM_EXITSIZEMOVE WM_NCCALCSIZE WM_SIZING
我的问题:我有一个使用 UINavigationController 的用户入职流程介绍入职流程中的每个步骤。使用 UISearchBar 推送 View Controller 时在其中，UISear
我是一名优秀的程序员,十分优秀！