我们怎样才能将div放在一个带左右按钮的div中？

Question

在我的代码中,我试图将箭头按钮放在div的最左边和右边,而middiv必须在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>


 

Answer 1

您无法<在HTML中使用...浏览器会将其视为开头标记.使用特殊字符,而不是<和>

<div id='page-nav'>
    <button id="left">&lt;</button>
    <div id="mid">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
    </div>
    <button id="right">&gt;</button>
</div>

那么,对你的问题.将#middiv 显示为内联块,然后添加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因此按钮包裹得很好.

的jsfiddle