Как выровнять текст по краям контейнера с помощью CSS? - PullRequest
Новая
       14

Как выровнять текст по краям контейнера с помощью CSS?

5 голосов
/ 05 июля 2010

В следующем примере я хочу, чтобы нижняя часть текста названия сайта «имя сайта» и нижняя часть текста меню «меню 1, меню 2, меню 3» выровнялись заподлицо с нижней частью контейнера, в котором они находятся ( заголовок). Как и сейчас, текст с собственным именем находится на некоторое количество пикселей выше нижнего края контейнера, а текст меню - на другое количество пикселей выше этого же края. Я хочу, чтобы оба элемента находились на одной линии.

Кажется, что использование line-height может подтолкнуть его через метод проб и ошибок с разными значениями, но результат не одинаков для всех браузеров (например, я могу получить их в Safari и Chrome, но тогда Firefox выглядит иначе). Должен ли быть лучший способ?

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

спасибо! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
        <head>
            <title></title>
            <style type="text/css">


        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, font, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            text-align: center;
        }

        #container {
            margin:0 auto;
            margin-top:20px;
            width:800px;
            border:1px solid red;
            text-align: left;
        }

        #header {
            float:left;
            position:relative;
            width:100%;
            border:1px solid green;
        }

        #sitename {
            float:left;
            left:0px;
            bottom:0px;
            margin:0;
            padding:0;
            border:1px solid blue;
        }

        #sitename h1 {
            font-weight: normal;
        }       

        #menu {
            position:absolute;
            right:0;
            bottom:0;
            line-height:1em;
            float:right;
            list-style: none;
            border:1px solid blue;
        }

        #menu ul li {
            list-style: none;
            float:left;
            padding: 0 0 0 15px;
        }

        #sitename h1 {
            font-size: 3em;
        }

        </style>
    </head>

    <body>

    <div id="container">

        <div id="header">
            <div id="sitename">
                <h1>site name</h1>
            </div>
            <div id="menu">
                <ul id="nav">
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                </ul>
            </div>
        </div>

        <div id="content">
        <p>here is some content.</p>
        </div>

        <div id="footer">
        <p>here is the footer.</p>
        </div>

    </div> <!-- container -->
    </body>
</html>

Ответы [ 5 ]

1 голос
/ 05 июля 2010

Вам не нужно оборачивать h1 в div. Это уже элемент уровня блока. Попробуйте этот код: 

<!-- CSS -->
#header {
  float:left;
  position:relative;
  width:100%;
  border:1px solid green;
  height: 100px;
}

#sitename {
  position: absolute;
  float:left;
  left:0px;
  bottom:0px;
  margin:0;
  padding:0;
  border:1px solid blue;
  font-weight: normal;
  font-size:3em;
}     

#menu {
  position:absolute;
  right:0;
  bottom:0;
  line-height:1em;
  float:right;
  list-style: none;
  border:1px solid blue;
}

#menu ul li {
  list-style: none;
  float:left;
  padding: 0 0 0 15px;
}

<!-- HTML -->
<div id="header">

  <h1 id="sitename">site name</h1>

  <div id="menu">
    <ul id="nav">
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
    </ul>
  </div>

</div>
0 голосов
/ 29 августа 2018

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

#sitename h1 {
  font-size: 9vw;
  margin-bottom: -2.2vw;
}

Это было полезно, потому что я использовал текст в качестве графического элемента на заднем плане. Как правило, вы не хотите устанавливать font-size с помощью vw (но, как правило, вы также не хотите, чтобы он был сброшен с элементом ниже).

0 голосов
/ 05 июля 2010

Есть ли у вас какие-либо стили сброса?Каждый браузер имеет разные значения по умолчанию для отступов и полей для таких элементов, как заголовки и списки.Если вы сбросите все в начале таблицы стилей, вам будет намного проще выстроить все в ряд!

Сброс Эрика Мейера css - хорошее место для начала: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

0 голосов
/ 05 июля 2010

Я бы предложил расположить имя сайта относительно того, где оно находится в данный момент, например: 

#sitename h1 {
   position: relative;
   top: 9px;
}

Однако это не идеально, потому что, если используются разные шрифты, интервал может отличаться. Это не то, что можно исправить с помощью любого свойства CSS (в настоящее время). Вы могли бы рассмотреть изображение? Чтобы всегда поддерживать одинаковую высоту?

0 голосов
/ 05 июля 2010

Вы можете установить отрицательную маржу на #sitename h1. Э.Г. 

#sitename h1 {
  font-size: 3em;
  margin-bottom: -9px;
}

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...