Центрирование плавающего ul в div с помощью css - PullRequest
Новая
       4

Центрирование плавающего ul в div с помощью css

0 голосов
/ 17 февраля 2012

По какой-то причине приведенный ниже код не центрирует мой неупорядоченный список (у меня есть стиль поля в html).Я не могу понять, почему ... какие-либо идеи ??

html: 

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="StyleSheet" type="text/css" href="organicForUs.css" />
</head>
<body>
    <div id="content">
        <img id="logo" src="logo.png" />
    </div>
    <div id="footie" style="margin-left: auto; margin-right: auto;">
        <ul>
            <li><p id="aboutP">about</p></li>
            <li><p id="addP">add your store</p></li>
            <li><p id="reportP">report a missing store</p></li>
            <li><p id="advertiseP">advertise with us</p></li>
        </ul>
    </div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="organicForUs.js"></script>
</body>

css: 

#footie li {
list-style-type: none;
float: left;
  }
 #footie p {
font-family: sans-serif;
font-size: 11px;
color: white;
font-weight: bold;
padding-left: 10px;
}

Ответы [ 2 ]

0 голосов
/ 20 августа 2012

Решение, предложенное выше, имеет одну оговорку: вам нужно предварительно указать ширину

. Это сломалось бы, если бы в ul было добавлено больше предметов. Вот лучшее решение: 
#footie {
  float:left;       ***
  width:100%;       ***
  overflow:hidden;  ***
  position:relative;***
}
#footie ul {
 clear:left;
 float:left;
 list-style:none;
 margin:0;
 padding:0;
 position:relative;  ***
 left:50%;           ***
 text-align:center; // optional, if you want to center the text
}
#centeredmenu ul li {
  position:relative; ***
  display:block;
  float:left;
  list-style:none;
  margin:0;
  padding:0;
  right:50%;         ***
}

Обратите внимание, что линии, отмеченные тремя звездами (***), являются линиями, которые абсолютно необходимы для этой работы.

Но это решение более динамично. Обратитесь к этой статье: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Веселись!

0 голосов
/ 17 февраля 2012

Во-первых, маржа применяется к родителю UL, а не к UL. Если вы хотите UL, а НЕ #footie, вам придется переместить объявления стилей (которые не должны быть встроенными, в любом случае).

Кроме того, для того чтобы поле: автоматический трюк работал, вам необходимо объявить ширину . Что-то вроде: 

#footie ul {
    width: 600px;
    margin: 0 auto;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...