在我的代码中,我试图将箭头按钮放在div的最左侧和右侧 mid
div必须在div的中间我已经看到manny问题,但没有得到正确的答案可以任何人帮助我究竟是什么问题?
我想要的是 mid
div可以是任何大小,所以它包含5个按钮,但它可能包含更多或更少,所以如何居中这个div所以这是可以实现的。
#page-nav{
width:400px;
border:1px solid;
height:20px;
}
#right{
float:right;
}
#mid{
margin: 0 auto;
width:auto;
}
<div id='page-nav'>
<button id=left></button>
<div id="mid">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<button id="right"></button>
</div>
5204
2018-05-08 06:36
起源
答案:
你不能用 <
在您的HTML中...浏览器会将其视为开头标记。请改用特殊字符 <
和 >
<div id='page-nav'>
<button id="left"><</button>
<div id="mid">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<button id="right">></button>
</div>
然后,对你的问题。显示 #mid
div作为内联块,并添加 text-align
至 #page-nav
。然后将左右箭头浮动到两侧。
#page-nav {
width:400px;
border:1px solid;
/*height:20px;*/
text-align: center;
}
#left {
float: left;
}
#right {
float:right;
}
#mid {
display: inline-block;
}
请注意,我删除了高度 #page-nav
因此按钮包裹得很好。
5
2018-05-08 06:43
使用
CSS
#page-nav {
width:400px;
border:1px solid;
height:25px;
text-align:center;
}
#right {
float:right;
}
#mid {
display:inline-block;
}
#left {
float:left;
}
4
2018-05-08 06:43
该 display: inline-block 上 #left 和 #right 你已经使用浮动没有任何目的,你可以删除它们。 - LinkinTED
@LinkinTED:是的。!!谢谢你指出 - Sajad Karuthedath
答案:
你不能用 <
在您的HTML中...浏览器会将其视为开头标记。请改用特殊字符 <
和 >
<div id='page-nav'>
<button id="left"><</button>
<div id="mid">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<button id="right">></button>
</div>
然后,对你的问题。显示 #mid
div作为内联块,并添加 text-align
至 #page-nav
。然后将左右箭头浮动到两侧。
#page-nav {
width:400px;
border:1px solid;
/*height:20px;*/
text-align: center;
}
#left {
float: left;
}
#right {
float:right;
}
#mid {
display: inline-block;
}
请注意,我删除了高度 #page-nav
因此按钮包裹得很好。
5
2018-05-08 06:43
使用
CSS
#page-nav {
width:400px;
border:1px solid;
height:25px;
text-align:center;
}
#right {
float:right;
}
#mid {
display:inline-block;
}
#left {
float:left;
}
4
2018-05-08 06:43
该 display: inline-block 上 #left 和 #right 你已经使用浮动没有任何目的,你可以删除它们。 - LinkinTED
@LinkinTED:是的。!!谢谢你指出 - Sajad Karuthedath
组 display:table
到父div和 display: table-cell
同 text-align:center
到内部div和左右按钮
UPDATE
将左右按钮包装到div中会更好:
#page-nav{
display: table;
width:400px;
border:1px solid;
height:20px;
}
#left {
display:table-cell }
#right{
display:table-cell;
text-align:right;
}
#mid{
display:table-cell;
text-align: center;
}
button {
margin-top: 0;
margin-bottom: 0;
}
<div id='page-nav'>
<div id="left">
<button id="leftBtn">L</button>
</div>
<div id="mid">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<div id="right">
<button id="rightBtn">R</button>
</div>
</div>
4
2018-05-08 06:43
使用两者 table-cell 和 float 是双倍...我建议使用其中任何一个。 - LinkinTED
谢谢@LinkinTED,这是对的。还更新了我的答案 - kapantzak
以下是我喜欢使用的方法 text-align: justify;
通过使用 span at 100% width
使用此方法的con是底部的空间。
<div id='page-nav'>
<button id=left><</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button id="right">></button>
<span class="stretch"> </span>
</div>
CSS
#page-nav{
width:400px;
border:1px solid;
text-align: justify;
}
.stretch {
width:100%;
height:1em;
display:inline-block;
}
2
2018-05-08 06:47
使用 absolute
箭头和箭头的位置 display:table
对于按钮:
#page-nav {
width:400px;
border:1px solid;
height:30px;
position: relative;
}
#left {
position:absolute;
left:0;
height:25px;
/*To center vertically*/
margin:auto;
top:0;
bottom:0;
}
#right {
position:absolute;
right:0;
height:25px;
/*To center vertically*/
margin:auto;
top:0;
bottom:0;
}
#mid {
margin: 0 auto;
width:auto;
display:table;
}
1
2018-05-08 06:50