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只为元素设置display：none，但是当用户导航到其他页面时，div再次显示。如何隐藏它以便用户在导航到其他页面后不会看到它？

提前致谢。

Answer 1

交换#mixclose和#mixtext的位置，并将其更改为div：

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

中删除#mixtext

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

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

修改

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

Answer 2

#mixtext - SPAN扩展到其内容的大小，因此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>

至于删除元素并将其删除，你需要用于检查回发的代码，然后检查元素是否存在。

当第二个向右浮动时，中心浮动右侧元素

3 个答案: