Текст внутри Div Застрял на правой стороне

Текст в div (или UL в других терминах) остается только в правой части div. Это содержание не будет оставаться центрированным независимо от того, что я меняю.Текст внутри Div Застрял на правой стороне

HTML:

<!DOCTYPE html> 
<html> 

<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Lakeside Books</title> 
    <link rel="stylesheet" type="text/css" href="masterstyle.css"> 
    <meta name="viewsize" content="width-device-width,initial-scale=1.0"> 

    <!--[if IE]> 
     <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

</head> 

<body> 
    <div id="wrapper"> 
     <div id="sidebar"> 
      <nav id="nav"> 
       <div id="searchbar"> 
        <form action="http://www.example.com/search.php"> 
         <input type="text" name="search" placeholder="Enter Book Title"/> 
        </form> 
       </div> 
       <ul> 
        <li> 
         <a id="firstlink"> 
          Home 
         </a> 
        </li> 
        <li> 
         <a id="secondlink"> 
          Categories 
         </a> 
        </li> 
        <li> 
         <a id="thirdlink"> 
          Bestsellers 
         </a> 
        </li> 
        <li> 
         <a id="fourthlink"> 
          Contact 
         </a> 
        </li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
</body> 
</html>

CSS:

body{ 

    background-color: #f1f6f6; 
} 

#sidebar{ 
    background-color: #212528; 
    position: fixed; 
    width: 20%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
} 

#nav{ 
    margin: 2em 1em 1em 1em; 
    text-align: right; 
    color: #888888; 
    display: block; 
    max-width: 100%; 
} 

#nav li{ 
    list-style-type: none; 
} 

#searchbar{ 
    padding-bottom: 0.5em; 
    text-align: center; 
} 

#searchbar input{ 
    max-width: 100%; 
} 

#firstlink{ 
    display: block; 
    padding: 0.5em 1.5em 0.5em 1.5em; 
} 

#secondlink{ 
    display: block; 
    padding: 0.5em 1.5em 0.5em 1.5em; 
} 

#thirdlink{ 
    display: block; 
    padding: 0.5em 1.5em 0.5em 1.5em; 
} 

#fourthlink{ 
    display: block; 
    padding: 0.5em 1.5em 0.5em 1.5em; 
}

Если вы посмотрите на это изображение, используя chromes инспектировать элемент вы можете ясно видеть, что контейнер литий толкается еще правее, чем центрирование себя в div. Изображение здесь - http://i.imgur.com/GfxLGtl.png

JSFiddle с кодом учтенного выше:

https://jsfiddle.net/4pxw4eus/

источник

2015-04-19 SavageSpud

ваш '' nav' имеет выравнивания текста: right'. – lexith

Я думаю, вы не использовали сброс CSS, так что ваш UL имеет некоторые оставили по умолчанию отступов. Добавьте видимые границы к вашим ul и li, чтобы увидеть проблему более четко:>

источник

2015-04-19 19:56:40 sEver

Это было очень полезно на самом деле, вот оно сейчас - http://i.imgur.com/6DuAlAM.png – SavageSpud

Все, что находится под навигацией, наследует ваш text-align:right;. Внесите новое правило:

#nav >li { text-align:center;}

источник

2015-04-19 19:59:02 kripple

Пробовал и не решает. – SavageSpud

Если это то, чего вы хотите достичь. Был центр выравнивания текста для #nav, но #nav не является вашим идентификатором UL, это была просто оболочка. По умолчанию элементы UL имеют прописку слева, которую я удалил. Вы устанавливали это на обертке, придавая еще большее значение вашему левому отступу.

Я также удалил верхние и нижние прокладки элементов LI, добавив их в ссылку #nav ul li a для целей UX.

Надеюсь, это то, что вы искали. Удачи!

body{ 
 

 
    background-color: #f1f6f6; 
 
} 
 

 
#sidebar{ 
 
    background-color: #212528; 
 
    position: fixed; 
 
    width: 20%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
} 
 

 
#nav{ 
 
    margin: 2em 1em; 
 
    color: #888888; 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 
#nav ul { 
 
    padding-left: 0; 
 
} 
 
#nav li{ 
 
    list-style-type: none; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 
#nav li a { 
 
    display: block; 
 
    padding: 0.5em 0; 
 
} 
 
#searchbar{ 
 
    padding-bottom: 0.5em; 
 
    text-align: center; 
 
} 
 

 
#searchbar input{ 
 
    max-width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title>Lakeside Books</title> 
 
    <link rel="stylesheet" type="text/css" href="masterstyle.css"> 
 
    <meta name="viewsize" content="width-device-width,initial-scale=1.0"> 
 

 
    <!--[if IE]> 
 
     <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
 
    <![endif]--> 
 

 
</head> 
 

 
<body> 
 
    <div id="wrapper"> 
 
     <div id="sidebar"> 
 
      <nav id="nav"> 
 
       <div id="searchbar"> 
 
        <form action="http://www.example.com/search.php"> 
 
         <input type="text" name="search" placeholder="Enter Book Title"/> 
 
        </form> 
 
       </div> 
 
       <ul> 
 
        <li> 
 
         <a id="firstlink"> 
 
          Home 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a id="secondlink"> 
 
          Categories 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a id="thirdlink"> 
 
          Bestsellers 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a id="fourthlink"> 
 
          Contact 
 
         </a> 
 
        </li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

источник

2015-04-19 20:04:03 designarti

Это работало как шарм, это именно то, что я хотел! Но еще один вопрос: как я могу заставить панель поиска иметь равное пространство по обе стороны от нее? – SavageSpud

Может быть, этот пример поможет вам: http://jsfiddle.net/kbw6449r/

#sidebar{ 
    background-color: #212528; 
    position: fixed; 
    width: 20%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
} 

#nav{ 
    margin: 2em 1em 1em 1em; 
    text-align: right; 
    color: #888888; 
    display: block; 
    max-width: 100%; 
} 

#searchbar{ 
    padding-bottom: 0.5em; 
    text-align: center; 
} 

#searchbar input{ 
    max-width: 100%; 
} 

#nav ul { 
    margin: 0; 
    padding: 0; 
} 
#nav li{ 
    list-style: none; 
    width: 100%; 
    text-align: center; 
    padding: 0.5em 0 0.5em 0; 
}

источник

2015-04-19 20:05:47 punctweb

Я думаю, вам нужно установить отступы UL до 0. Смотрите эту скрипку, чтобы увидеть, как дополняющие причины по умолчанию это:

#nav > ul { padding:0; }

http://jsfiddle.net/2p6r0e5x/

источник

2015-04-19 20:06:20 garryp

Это может быть хорошо использовать, попробуйте:

.my-div{ 
    height: 100%; // or whatever 
    width: 100%; // or whatever 
    display: table; 
} 
.my-div p{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}

источник

2015-04-19 20:24:32 shmnsw

Текст внутри Div Застрял на правой стороне

ответ

Смежные вопросы