Текст не выравнивается в HTML с помощью CSS - PullRequest
Новая
       22

Текст не выравнивается в HTML с помощью CSS

0 голосов
/ 15 сентября 2009

Вот моя разметка 

     <div class="code php">
        <div class="container">
        <div class="line-numbers">1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15 </div>
        <code>
    <?php
        $people = array('henry', 'foo', array('jeff', 'bar'), 'tom', 'barry');

        foreach($people as $person) {

            if (is_array($person) {
                  foreach($person as $innerPerson) {
                      if ($innerPerson == 'bar') {
                          break 2;
                      }              
                   }
            }
        }
    ?>
        </code>
        </div>
        </div>

UPDATE

Исправлено форматирование для выше. Было важно, потому что он использует white-space: pre в CSS.

А вот и мой CSS 

.code {
    display: block;
    margin: 1em 0 1em 0.3em;
    padding: 0.8em;

}

.code .container {
    background: #efe;
    white-space: pre;
    border-left: 3px solid #6d9743;
    font-size: 1em;
    line-height: 1.1em;
    padding: 0.8em;

}

.code .caption {
    display: block;
    font-size: 90%;
    margin-top: 0.5em;
    color: #333;
}

code,
.code .line-numbers {
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, Courier New, serif;
    border: 0px solid red;
}

.code .line-numbers {
    float: left;
    padding-right: 0.8em;
    color: #ccc;
}

А вот что происходит!

блин http://alexanderdickson.com/so.png

Обратите внимание, что номера строк не совпадают? Раньше работал отлично. Недавно я много поиграл с этим, чтобы позволить себе добавить заголовок, и я думаю, что я его запутал. (Мне действительно нужно посмотреть на контроль версий!)

Кто-нибудь может увидеть, что я делаю не так? Я пробовал высоту строки, отступы и т. Д. И проверял как можно лучше с Firebug.

Спасибо

ДРУГОЕ ОБНОВЛЕНИЕ

Реальный живой пример здесь: http://www.alexanderdickson.com/articles/php/exiting-a-loop-early/

Примечание. Я попытался удалить все форматирование кода (все <spans> и т. Д.), Но проблема все еще существует!

FIXED

Теперь он работает с этим CSS 

.code {
    display: block;
    margin: 1em 0 1em 0.3em;
    padding: 0.8em;

}

.code .container {
    background: #efe;
    border-left: 3px solid #6d9743;
    font-size: 1em;
    line-height: 1.5em;
    padding: 0.8em;
    white-space: pre;
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, Courier New, serif;

}

.code .line-numbers {
    float: left;
    padding-right: 0;
    color: #ccc;
    width: 2em;
}

.code .caption {
    display: block;
    font-size: 90%;
    margin-top: 0.5em;
    color: #333;
}

Ответы [ 3 ]

2 голосов
/ 15 сентября 2009

Попробуйте добавить высоту строки к .line-numbers

Это работает для меня: 

.code {
    display: block;
    margin: 1em 0 1em 0.3em;
    padding: 0.8em;

}

.code .container {
    background: #efe;
    white-space: pre;
    border-left: 3px solid #6d9743;
    font-size: 1em;
    line-height: 1.5em;
    padding: 0.8em;

}

code {
margin: 0;
padding: 0;
}

.code .caption {
    display: block;
    font-size: 90%;
    margin-top: 0.5em;
    color: #333;
}

code, .code .line-numbers {
    font-family: Consolas, Monaco, Lucida Console, Liberation Mono, Courier New, serif;
    border: 0px solid red;
}

.code .line-numbers {
    float: left;
    padding-right: 0;
    color: #ccc;
    line-height:1.5em;
    padding-top: 2px;
    width: 20px;
}

Постараюсь выложить скриншот.

Вот мой HTML: 

<html>
<head>
    <link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>    
 <div class="code php">
        <div class="container">
        <div class="line-numbers">
 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15 </div>
        <code>
    &lt;?php
        $people = array('henry', 'foo', array('jeff', 'bar'), 'tom', 'barry');

        foreach($people as $person) {

            if (is_array($person) {
                  foreach($person as $innerPerson) {
                      if ($innerPerson == 'bar') {
                          break 2;
                      }              
                   }
            }
        }
    ?&gt;
        </code>
        </div>
    </div>
</div>
</body>

alt text

1 голос
/ 15 сентября 2009

вы вызываете класс ".code" в вашем css, но код - это тег, а не класс, так что это будет просто "code" в вашем css

0 голосов
/ 15 сентября 2009

В вашем классе есть пробел: "code php"

[редактировать: без кофе]

Удалить сложность. Что находится в вашем определении класса кода? В вашем определении класса php? Если php приходит вторым, а вы меняете код, ваши изменения не будут отображаться. Примечание: используйте что-то более наглядное, чем код, так как код - это имя элемента. Я почти уверен, что это не имеет значения, но это помогает удобочитаемости и предотвращает простые ошибки, такие как разница между кодом и .code, не говоря уже о #code.

...