當第二個浮動右邊時，浮動中心的右邊元素

Question

我在頁面底部添加了固定條，首先我有100％寬度的固定容器，其中包含2個元素。第一個是內容，第二個關閉吧。

欲第一元件，即，「mixtext」在酒吧中居中，和第二元件，關閉按鈕爲始終在正確的，我想他們是在同一行上。你能建議我該怎麼做？

下面是HTML代碼：

<div id="mixwrap"> 
    <span id="mixtext"> 
    [Text that needs to be centered within the space from left to the next element] 
    </span> 
    <span id="mixclose"> 
    <input type="button" id="mixclosebut" onclick="document.getElementById('mixwrap').style.display = 'none';"> 
    </span> 
</div> 

和CSS：

#mixwrap { 
    left: 0; 
    bottom: 0; 
    position: fixed; 
    width: 100%; 
    background: #555; 
    color: white; 
} 

#mixtext { 
    text-align: center; 
    padding: 8px; 
    font-family: MetaBold, "Trebuchet MS", sans-serif; 
    float: left; 
} 

#mixclose { 
    cursor: pointer; 
    float: right; 
} 

另外，我要記住用戶的選擇，當有人點擊關閉按鈕，JS只是設置顯示：沒有了元素，但是當用戶導航到其他頁面時，div會再次顯示。如何隱藏它以便用戶在導航到其他頁面後不會看到它？

在此先感謝。從#mixtext CSS

<div id="mixwrap"> 
    <div id="mixclose"><input type="button" id="mixclosebut" 
     value="Test" onclick="document.getElementById('mixwrap').style.display = 'none';"> 
    </div> 

    <div id="mixtext"> 
    [Text that needs to be centered within the space from left to the next element] 
    </div> 
</div> 

並刪除float: left：

Answer 1

互換#mixclose和#mixtext的位置，並改變他們的div

#mixtext { 
    text-align: center; 
    padding: 8px; 
    font-family: MetaBold, "Trebuchet MS", sans-serif; 
} 

現在#mixtext將擴大到100％它可用空間和#mixclose將向右側漂移。

編輯：

在問候你的最後一個問題，要記住用戶的設置來顯示#mixtext與否，你就必須要麼使用cookies或服務器端語言。

Answer 2

#mixtext - 跨越擴大其內容的大小，所以text-align:center是沒有意義的。元素中沒有空白，所以文本將始終在包裝中「居中」。

#mixtext需要是爲了遏制白色空間的DIV。

的DIV擴大接納其容器的寬度，因此，它將成爲寬100％，除非另行告知。你需要給#mixtext一個WIDTH來給你的按鈕一些空間。

因爲你有#mixtext float:left，文字的容器將始終在屏幕的左邊，不居中。

要居中的DIV，因爲是float:center，我們需要使用到的利潤中心，它沒有這樣的事。這裏使用了「negative margin centering trick」

下面是我們結束：http://jsfiddle.net/Diodeus/74m9C/1/

#mixtext { 
text-align: center; 
padding: 8px; 
font-family: MetaBold, "Trebuchet MS", sans-serif; 
width:600px; 
position:relative;  
float:left;  
left:50%; 
margin-left:-300px; 
border:1px solid #ff0000;  
} 

Answer 3

試試這個：

<style> 
#mixwrap { 
left: 0; 
bottom: 0; 
position: fixed; 
width: 100%; 
background: #555; 
color: white; 
} 

#mixtext { 
width:200px; 
margin:0 auto; 
padding: 8px; 
font-family: MetaBold, "Trebuchet MS", sans-serif; 
} 

#mixclose { 
width:30px; 
cursor: pointer; 
float: right; 
} 

</style> 
<div id="mixwrap"> 
<div id="mixtext"> 
[Text that needs to be centered within the space from left to the next element] 
</div> 
<div id="mixclose"><input type="button" id="mixclosebut" onclick="document.getElementById('mixwrap').style.display = 'none';"> 
</div> 
</div> 

至於刪除元素，並保持它去掉，你需要的代碼，將檢查回發，然後檢查元素以查看其是否存在。