Пробел между вертикальной панелью навигации и абзацем

Question

Пробел между вертикальной панелью навигации и абзацем

0

У меня есть какое-то загадочное пустое пространство, от которого я не знаю, как избавиться. У меня есть вертикальный список, и я хочу, чтобы он был рядом с абзацем с текстом. Вот мой HTML и CSS

РЕШЕННЫЙ jmgem, Я ТАКЖЕ ЧИТАЕМОГО ИЗМЕРЕНИЯ ЭЛЕМЕНТА МОИХ ЭЛЕМЕНТОВ, ЧТО ЭТО БЫЛО ПРИСОЕДИНЯТЬСЯ НА БАРЕ NAV

HTML

<div id="classOfferingList" class="classOfferingList" align="left">
    <ul>
        <li>
            <a href="" >General U.S. K-12 English Speaking Course</a>
        </li>
        <li>
            <a href="" >University Preperation Course</a>
        </li>
        <li>
            <a href="" >SAT Preperation Course</a>
        </li>
        <li>
            <a href="" >GRE Preperation Course</a>
        </li>
    </ul>
</div>
<div id="classOfferingInfo" >
    <p>example text</p>
</div>

CSS

.classOfferingList ul {
  list-style-type: none;
  float: left;
}

.classOfferingList ul li {
  margin: 5px 0px;
}

.classOfferingList ul li a {
  list-style:  none;
  margin: 1px 0px;
  display: inline-block;
  background-color: blue;
  width: 35%;
  text-align: center;
}

Joshua de Leon 14 март 2014, в 04:40

Источник

0

Вероятно, что элементы inline-block вызывают это. Смотрите этот ответ
Josh Crozier 14 март 2014, в 03:08
0

@JoshCrozier Спасибо за ответ, но это ничего не изменило.
Joshua de Leon 14 март 2014, в 03:22
0

Это то, что вы искали jsfiddle.net/32q6y * Изменили цвет текста, потому что я его не видел: p
Cup of Java 14 март 2014, в 03:26
0

@ user3010773 Это ближе к тому, что я хотел. Проблема в том, что я хочу, чтобы текст располагался на панели навигации. Как, например, в книгах есть одно большое письмо с остальным текстом вокруг него.
Joshua de Leon 14 март 2014, в 03:42

Показать ещё 2 комментария

Теги:

html

css

html5

whitespace

removing-whitespace

3 ответа

0

http://jsfiddle.net/erenyener/TC856/

#classOfferingList > ul
{
    padding:0px;
}

вам нужно сбросить элемент ul

или ваш вопрос может быть таким

FIDDLE

Mehmet Eren Yener 14 март 2014, в 00:28

0

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

.classOfferingList {
    float: left;
}
.classOfferingList ul {
  list-style-type: none;
  float: left;
}

.classOfferingList ul li {
  margin: 5px 0px;
}
#classOfferingInfo {
    float: left;
}
.classOfferingList ul li a {
  list-style:  none;
  margin: 1px 0px;
  display: inline-block;
  background-color: blue;
  width: 35%;
  text-align: center;
  color: #fff;
}

Tepken Vannkorn 14 март 2014, в 00:24

Ещё вопросы

Вероятно, что элементы inline-block вызывают это. Смотрите этот ответ
@JoshCrozier Спасибо за ответ, но это ничего не изменило.
Это то, что вы искали jsfiddle.net/32q6y * Изменили цвет текста, потому что я его не видел: p
@ user3010773 Это ближе к тому, что я хотел. Проблема в том, что я хочу, чтобы текст располагался на панели навигации. Как, например, в книгах есть одно большое письмо с остальным текстом вокруг него.

jmgem · Accepted Answer · 2014-03-14T01-24-00.000Z

Прежде всего, я скопировал ваш код в jsfiddle. Продолжайте и смотрите.

http://jsfiddle.net/GyuX5/

Если я правильно понял ваш вопрос, вы хотели бы поставить абзац рядом с вертикальным меню. Итак, вот ваш скорректированный CSS

.classOfferingList ul {
  list-style-type: none;
  float: left;
}

.classOfferingList ul li {
   margin: 5px 0px;
}

.classOfferingList ul li a {
  list-style:  none;
  margin: 0px;
  display: inline-block;
  background-color: grey;
  text-align: center;
  width: 150px;
}

#classOfferingInfo {
    display: inline-block;
}

Я отобразил ваш абзац как встроенный блок, затем я изменил ширину li a до 150 пикселей вместо 35%. Вуаля.

Выбирайте, чтобы не использовать левый поплавок, поскольку они имеют тенденцию нарушать макеты, поскольку они становятся более сложными. попробуйте представить html/css как блоки, заполняющие строку в браузере слева направо.

Эй, спасибо, это в значительной степени исправило то, что мне было нужно. Мне также пришлось настроить размер абзаца (маленький жучок решил пойти ниже моей навигационной панели). Спасибо за помощь!