Javascript 当第二个元素向右浮动时，居中浮动的右元素

我在页面底部添加了固定条，首先我有100%宽度的固定容器，其中包含2个元素。第一个是内容，第二个关闭栏

我希望第一个元素，即mixtext，在条中居中，第二个元素close按钮始终位于右侧，并且我希望它们位于同一行。你能建议我怎么做吗

以下是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>

另外，我想记住用户的选择，当有人单击关闭按钮时，js只为元素设置display:none，但当用户导航到其他页面时，div再次显示。我如何隐藏它，以便用户在导航到其他页面后不会看到它

提前感谢。

交换mixclose和mixtext的位置，并将其更改为divs:

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

现在，mixtext将扩展到其可用空间的100%，mixclose将向右浮动

编辑：

关于上一个问题，要记住用户设置是否显示mixtext，您必须使用cookie或服务器端语言。

mixtext-跨度扩展到其内容的大小，因此文本对齐：居中没有意义。元素中没有空格，因此文本将始终在其包装器中居中

mixtext必须是DIV才能包含空白

div扩展以占据其容器的宽度，因此除非另有说明，否则它将变为100%宽。你需要给mixtext一个宽度，给你的按钮一些空间

因为mixtext上有float:left，所以文本的容器将始终位于屏幕的左侧，而不是居中

要使DIV居中，因为没有float:center这样的东西，所以我们需要使用边距将其居中。这使用

以下是我们的结局：

试试这个：

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

至于删除元素并保持删除状态，您需要检查回发的代码，然后检查元素是否存在

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

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

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