Центр плавал правый элемент, когда второй плавал вправо - PullRequest
Новая
       23

Центр плавал правый элемент, когда второй плавал вправо

1 голос
/ 19 января 2012

Я добавляю фиксированную панель внизу страницы, сначала у меня есть фиксированный контейнер шириной 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 снова отображается. Как я могу скрыть это, чтобы пользователь не видел его после перехода на другую страницу?

Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 19 января 2012

#mixtext - SPAN расширяются до размера их содержимого, поэтому text-align:center не имеет смысла.В элементе нет пробелов, поэтому текст всегда будет «центрирован» в его оболочке.

#mixtext должен быть DIV, чтобы содержать пробел.

DIV расширяются, чтобы занять ширину своего КОНТЕЙНЕРА, поэтому он станет 100% шириной, если не указано иное.Вам нужно дать #mixtext ШИРИНУ, чтобы дать вашей кнопке некоторое пространство.

Поскольку у вас есть float:left на #mixtext, контейнер текста всегда будет слева от экрана, а не по центру.

Для центрирования DIV, поскольку нет такой вещи, как float:center, нам нужно использовать поля для центрирования.При этом используется « уловка отрицательного поля центрирования »

Вот что мы в итоге получаем: 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;    
}
0 голосов
/ 19 января 2012

Попробуйте это: 

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

Что касается удаления элемента и его удаления, вам нужен код, который проверит обратную передачу, а затем проверит наличие элемента, чтобы увидеть, есть ли он там.

0 голосов
/ 19 января 2012

Поменяйте местами #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 из #mixtext css: 

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

Теперь #mixtext расширится до 100% доступного пространства, а #mixclose сместится вправо.

Редактировать:

Что касается вашегоПоследний вопрос: чтобы запомнить настройки пользователя для отображения #mixtext или нет, вам придется использовать файлы cookie или язык на стороне сервера.

...