在我的代码中,我试图将箭头按钮放在div的最左侧和右侧,并且mid
div必须在div的中间,我已经看到了很多问题,但没有得到正确的答案,有人可以帮助我吗?到底是什么问题?
我想要的是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>
最佳答案
您无法在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
。然后向左和向右 float 箭头。#page-nav {
width:400px;
border:1px solid;
/*height:20px;*/
text-align: center;
}
#left {
float: left;
}
#right {
float:right;
}
#mid {
display: inline-block;
}
请注意,我删除了
#page-nav
的高度,因此按钮在其中包裹得很好。JSFiddle