并排显示元素
[英]displaying elements side by side
问题描述
im trying to code a website and am a bit stumped.
我正在尝试编写一个网站，但我有点困惑。 i've tried everything from我已经尝试了一切display: inline-block; to float: left; float: left; and float: right;和float: right;
to no avail.无济于事。 I was wondering how I could get the <i> tags to be side by side rather than up and down?我想知道如何让<i>标签并排而不是上下？
body{ padding: 0; margin: 0; } .top-navbar{ background-color: black; height: 50px; width: 100%; } .icons{ width: 80px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .pic{ text-align: center; padding: 6.5px 2px 2px 2px; height: 40px; width: 40px; } .pic:hover{ transition: background-color 0.5s ease; background-color: red; } #top-nav-img{ color: white; }
<body> <div class="top-navbar"> <div class="icons"> <div class="pic"> <i class="fa fa-user fa-2x" id="top-nav-img"></i> </div> <div class="pic"> <i class="fa fa-info fa-2x" id="top-nav-img"></i> </div> </div> </div> </body>
3 个解决方案
解决方案1
0 2015-11-29 04:32:06
.pic s can not fit in .icon because the width of .pic s is greater than their parent so the second .pic goes to the second line. .pic s不能适合在.icon因为宽度.pic s低于它们的父更大，从而第二.pic前进到第二行。 However, You can remove width:80%;但是，您可以删除width:80%; from .icon or reduce the size of .pic s.从.icon或减小的尺寸.pic秒。
body{ padding: 0; margin: 0; } .top-navbar{ background-color: black; height: 50px; width: 100%; } .icons{ /* width: 80px; */ margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .pic{ text-align: center; padding: 6.5px 2px 2px 2px; height: 40px; width: 40px; float:left; background-color:red; color:#fff; border:1px solid #fff; } .pic:hover{ transition: background-color 0.5s ease; background-color: red; } #top-nav-img{ color: white; }
<body> <div class="top-navbar"> <div class="icons"> <div class="pic"> <i class="fa fa-user fa-2x" id="top-nav-img">1</i> </div> <div class="pic"> <i class="fa fa-info fa-2x" id="top-nav-img">2</i> </div> </div> </div> </body>
解决方案2
0 2015-11-29 04:35:44
Add display:inline;添加display:inline; to the .pic css.到.pic css。
body { padding: 0; margin: 0; } .top-navbar { background-color: black; height: 50px; width: 100%; } .icons { width: 80px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .pic { text-align: center; padding: 6.5px 2px 2px 2px; height: 40px; width: 40px; display: inline; } .pic:hover { transition: background-color 0.5s ease; background-color: red; } #top-nav-img { color: white; }
<body> <div class="top-navbar"> <div class="icons"> <div class="pic"> <i class="fa fa-user fa-2x" id="top-nav-img">a</i> </div> <div class="pic"> <i class="fa fa-info fa-2x" id="top-nav-img">b</i> </div> </div> </div> </body>
解决方案3
0 已采纳 2015-11-29 04:37:39
You have .icons to thin.你有.icons来瘦身。 Remember, that when you set width and padding to the element the values add up so if you have 40px of width and 2px or padding it will be 44px ( 2px on each side) - unless you set box-sizing: border-box then width will be determined by value and paddings will be inside that values.请记住，当你设置width和padding到元素的值加起来所以如果你有40px的宽度和2px或填充这将是44px （ 2px每边） -除非你把box-sizing: border-box ，然后width将由值决定，填充将在该值内。
body{ padding: 0; margin: 0; } .top-navbar{ background-color: black; height: 50px; width: 100%; } .icons{ width: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .pic{ display: inline-block; text-align: center; padding: 6.5px 2px 2px 2px; height: 40px; width: 40px; } .pic:hover{ transition: background-color 0.5s ease; background-color: red; } #top-nav-img{ color: white; }
<body> <div class="top-navbar"> <div class="icons"> <div class="pic"> <i class="fa fa-user fa-2x" id="top-nav-img"></i> </div> <div class="pic"> <i class="fa fa-info fa-2x" id="top-nav-img"></i> </div> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.