Question

我有一个标题，左边和右边有一个元素，中间有一个元素，其宽度填充中间剩余的空间。我知道px中的左右元素宽度。我需要中间元素的内容在剩余空间的中心，无论它有多宽。

HTML

  <section class="header">
       <div class="left"></div>
       <div class="middle">
               <ul>
                  <li><button></button></li>
                  <li><button></button></li>
                  <li><button></button></li>
               </ul>
       </div>
       <button class="right"></button>  
  </section>

CSS：

.left {
    width:100px;
}

.middle {
    /*
     * This width is 100% of the space between left and right, 
     * content needs to be centered within it
     */
}

.right {
     width:100px;
}

Answer 1

我尝试了你在问题中提出的问题，我得到的输出我认为是正确的。

首先，我添加了一些我修改过的代码

HTML

<section class="header">
    <div class="left"><button>hai</button></div>
       <div class="middle">
               <ul>
                  <li><button></button></li>
                  <li><button></button></li>
                  <li><button></button></li>
               </ul>
       </div>
       <button class="right">right</button>  
  </section>

CSS

.left{
width: 100px;
float: left;
position: absolute;
top: 30px;
left: 10px;
}

.header
{
    background:red;
}

.middle{
/*This width is 100% of the space between left and right, 
content needs to be centered within it*/
    position: relative;
left: 37%;
}

.right{
    position: absolute;
    right: 20px;
    top: 30px;
    width: 100px;
}

我正在添加jsfiddle的链接，我实现了所需的

http://jsfiddle.net/pMdL7/1/

中间div的中心内容在2个div之间

1 个答案: