在我的代码中,我试图将箭头按钮放在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中使用< ...浏览器会将其视为开始标记。使用特殊字符代替&lt;&gt;

<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>

然后,对你的问题。将#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

10-07 19:37
查看更多