[英]HTML How to align 3 element on the same line
I see a lot of questions about this argument, but I can't able to solve my problem yet. 我看到很多有关此论点的问题,但我还不能解决我的问题。 I have 3 elements, and I want to align them in the same line.
我有3个元素,我想将它们对齐在同一行。
This is my HTML code: 这是我的HTML代码:
<div>
<a class="sxprova" href="javascript:scroll_modules(-1);"><</a>
<ul class="nav" id="ModuleContainer" runat="server" style="margin-right:20px; float:initial">
</ul>
<a class="dxprova" href="javascript:scroll_modules(1);">></a>
</div>
and this is my CSS code : 这是我的CSS代码:
.sxprova {
float:left;
padding: 17px 5px;
z-index: 100;
font-weight: bold;
border-right: 1px solid #CCC;
background-color: rgb(223,223,223);
}
.dxprova {
float:right;
border-left: 1px solid #CCC;
padding: 17px 5px;
z-index: 100;
font-weight: bold;
background-color: rgb(223,223,223);
}
.nav {
font-family: 'Trebuchet MS', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 13px;
position: relative;
padding: 0 0 0 20px;
margin: auto;
background-color: rgb(223,223,223);
width: 98%%;
white-space: nowrap;
overflow-x: hidden;
padding-right: 20px;
}
With this code the result is approximately the following: 使用此代码,结果大致如下:
[FIRSTELEMENT] [SECOND ELEMENT________________________________________________] _________________________________________________________________[THIRD ELEMENT] [要素] [第二要素________________________________________________] _________________________________________________________________ [第三要素]
What I want is something like that: 我想要的是这样的:
[FIRSTELEMENT] [SECOND ELEMENT________________________________][THIRD ELEMENT] [要素] [第二要素________________________________] [第三要素]
Can someone help me? 有人能帮我吗?
<ul class="nav" id="ModuleContainer" runat="server" style="margin-right:20px; float:left">
ul
也应该悬空。
Kindly, refer following demo to align 3 element on the same line. 请参考以下演示将3个元素对齐在同一行上。 Working properly on Jsfiddle try this on your browser.
在Jsfiddle上正常工作,请在浏览器上尝试一下。
Align 3 element on the same line 在同一行上对齐3个元素
What I have changed: 我改变了什么:
1. Added your html inside a DIV element. 1.在DIV元素内添加了html。
<div id="dvContainer" class="container">
... Yout HTML Goes Here
</div>
2. Changes done in CSS 2. CSS中所做的更改
.container {
width: 100%;
position: relative;
display: inline-block;
}
.sxprova {
/*float:left;*/ -- Comment this out and add following
position: absolute;
left: 0;
top: 0;
}
.dxprova {
/*float:right;*/ -- Comment this out and add following
position: absolute;
right: 0;
top: 0;
}
ul {
margin-right: 20px;
float: initial;
}
ul li {
display: inline-block;
/*width: 20px;
border: 1px solid #fff;*/ -- Comment this out not required
text-align: center;
padding: 20px 0;
}
You can wrap your items in a div, and float two of them left, and the last one right. 您可以将项目包装在div中,然后向左浮动其中两个,向右浮动最后一个。 It's a very vague question, as you do not provide alot of information about your problem.
这是一个非常模糊的问题,因为您没有提供有关问题的大量信息。 I hope this solves your problem.
我希望这能解决您的问题。
Html: HTML:
<div id="wrapper">
<div class="item floatLeft"></div>
<div class="item floatLeft"></div>
<div class="item floatRight"></div>
</div>
CSS: CSS:
#wrapper {
width: 100%;
}
.item {
width: 200px;
height: 200px;
background-color: black;
margin: 0 25px 0 0;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
Finally i find the solution.. I have to say thank you to @Parasmani Batra and Suprabhat for their suggestions. 终于我找到了解决方案。.我不得不对@Parasmani Batra和Suprabhat的建议表示感谢。
<div id="dvContainer" class="containerModule" style="background-color: rgb(223,223,223);">
<a class="sxprova" href="javascript:scroll_modules(-1);"><</a>
<ul class="nav" id="ModuleContainer" runat="server" style="float:left">
</ul>
<a class="dxprova" href="javascript:scroll_modules(1);">></a>
</div>
and the css: 和CSS:
.nav {
font-family: 'Trebuchet MS', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 13px;
position: relative;
margin: auto;
background-color: rgb(223,223,223);
width: 100%%;
white-space: nowrap;
overflow-x: hidden;
padding-right: 20px;
}
.containerModule {
width: 100%;
position: relative;
display: inline-block;
}
.sxprova {
float: left;
padding: 17px 5px;
z-index: 100;
font-weight: bold;
border-right: 1px solid #CCC;
background-color: rgb(223,223,223);
}
.dxprova {
float: right;
border-left: 1px solid #CCC;
padding: 17px 5px;
z-index: 100;
font-weight: bold;
background-color: rgb(223,223,223);
}
ul {
float: initial;
}
ul li {
display: inline-block;
border: 1px solid #fff;
text-align: center;
}
i add the background color at the container to fill the bar until the end. 我在容器中添加背景色以填充栏直到最后。
<div class="item-list">
<a class="sxprova" href="javascript:scroll_modules(-1);"><</a>
<ul class="nav" id="ModuleContainer" runat="server" style="height:51px;width:85%;float:left;margin:0 5px;">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<a class="dxprova" href="javascript:scroll_modules(1);">></a>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.