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


在我的代码中,我试图将箭头按钮放在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中...浏览器会将其视为开头标记。请改用特殊字符 &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。然后将左右箭头浮动到两侧。

#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


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

FIDDLE DEMO


4
2018-05-08 06:43



该 display: inline-block 上 #left 和 #right 你已经使用浮动没有任何目的,你可以删除它们。 - LinkinTED
@LinkinTED:是的。!!谢谢你指出 - Sajad Karuthedath


答案:


你不能用 < 在您的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。然后将左右箭头浮动到两侧。

#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


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

FIDDLE DEMO


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

的jsfiddle


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