За последние 24 часа нас посетили 21723 программиста и 1023 робота. Сейчас ищут 685 программистов ...

блочный или строчный элемент

Тема в разделе "HTML и CSS", создана пользователем Vladchucha, 13 дек 2018.

  1. Vladchucha

    Vladchucha Активный пользователь

    С нами с:
    12 ноя 2018
    Сообщения:
    167
    Симпатии:
    7
    Адрес:
    Nürnberg
    Добрый день,
    мне надо в меню в <li >сделать 2 ссылки для переключения языка.
    <а> - строчный элемент, но браузер ставит <a href="#"> RU</a>
    под <a href="#">DE /</a>, то есть как бы 2 элемента, один над другим. Почему и как сделть чтобы было одно поле с содержимым.
    Спасибо.
    .......................................
    <li><a href="#">Tab four</a>
    <ul >
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    </ul>
    </li>
    <li> <a href="#">DE /</a><a href="#"> RU</a> </li>
    ...................................
     
  2. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.155
    Симпатии:
    1.769
    Адрес:
    :сердА
    поместить их в контейнер достаточной ширины
    юзать флексбокс
    выставить им корректный display
    флоаты на худой конец

    выбирайте, что вам по ситуации ближе
     
  3. Vladchucha

    Vladchucha Активный пользователь

    С нами с:
    12 ноя 2018
    Сообщения:
    167
    Симпатии:
    7
    Адрес:
    Nürnberg
    Thanks, но
    вот так не работает:
    <li> <a style="display:inline" href="#">DE /</a><a href="#"> RU</a> </li>
    то есть все по-прежнему.
    Так тоже без изменений:
    <li><div style="size:200px"> <a style="display:inline" href="#">DE /</a><a href="#"> RU</a></div> </li>
    И все же принципиальный вопрос.<а> строчый?
    если "Да", то почему???
     
  4. MRSgiba

    MRSgiba Активный пользователь

    С нами с:
    22 дек 2017
    Сообщения:
    200
    Симпатии:
    32
    <a> - строчный, но в твоем случае скорее всего отрабатывает какая нибудь css, нажми f12- выбери вычислено и посмотри откуда и что
     
  5. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Код (Text):
    1. ul#horizontal-list li {
    2.     display: inline;
    3. }
     
  6. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.989
    Симпатии:
    759
    http://jsfiddle.net/
    вот сюда заходи
    код свой пиши
    результат сохрани
    и ссылку верни
     
  7. Vladchucha

    Vladchucha Активный пользователь

    С нами с:
    12 ноя 2018
    Сообщения:
    167
    Симпатии:
    7
    Адрес:
    Nürnberg
    Спасибо.
    1.

    1. Код (Text):
      1.  
      2. [LIST=1]
      3. [*]ul#horizontal-list li {
      4. [*]    display: inline;
      5. [*]}
      6. [/LIST]
    не помогает.
    Что такое f12 не понял,
    делаю в Notepad++.....
    Вот ссылка, http://jsfiddle.net/y1zku2vn/
    все в одном файле, пока заготовка,
    основное меню по центру.
    и еще не врубаюсь: если вставить меню в <div>, в которoм class="header"
    то оно все равно идет вниз, то есть опять же после <а>, в которoм <img src=""
    функционирует как блочный элемент
    <div class="header"><a href="#"><img src="" alt="Foto" name="Insert_Foto" width="20%" height="300" id="Insert_Foto" style="background-color: #8090AB; display:inline;" /></a>
    <div id="centeredmenu">
    <ul>
    <li><a href="#">Tab one</a>
    <ul>
    <li><a href="#">Link one</a></li>

    </ul>
    </li>
    <li class="active"><a href="#" class="active">Tab two</a>
    <ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <
    </ul>
    </li>
    <li><a href="#">Big tab three</a>
    <ul>
    <li><a href="#">Link one</a></li>

    </ul>
    </li>
    <li><a href="#">Tab four</a>
    <ul class="last">
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    </ul>
    </li>
    <li> <a style="display:inline" href="#">DE /</a><a href="#"> RU</a> </li>
    <!--<li> <a href="#"> RU</a> </li>-->
    </ul>
    <!-- END centeredmenu --></div>

    <!-- END .HEADER --></div>
     
  8. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
  9. Vladchucha

    Vladchucha Активный пользователь

    С нами с:
    12 ноя 2018
    Сообщения:
    167
    Симпатии:
    7
    Адрес:
    Nürnberg
    Хм...
    Возможно я идиот или мало виски выпил, но:
    1. In <style> </style>
    Код (Text):
    1. #horizontal-list li {
    2.     display: inline;
    3. }
    2. В <body>:
    Код (Text):
    1.  <li id="horizontal-list"> <a  href="#">DE /</a><a href="#"> RU</a> </li>
    вот здесь: http://jsfiddle.net/y1zku2vn/2/
    Где ошибка не понимай.....
     
  10. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    #horizontal-list li значит <ul id="horizontal-list"> для всех li внутри или делай без li #horizontal-list {} но тогда не логично. Тогда нужно #horizontal-list-item {} обзывать плюс id больше 1 на странице быть не может. Соответсвенно не id а class
     
  11. Vladchucha

    Vladchucha Активный пользователь

    С нами с:
    12 ноя 2018
    Сообщения:
    167
    Симпатии:
    7
    Адрес:
    Nürnberg
    Cпасибо за науку.
    1. Выяснил, что от количества виски никак не зависит.
    2. Упростил(укоротил) файл для обозримости.
    3. Сдалал класс
    .horizontal-list-item {
    display: inline;
    }

    - строка 228
    4. строка 272
    <li class = "horizontal-list-item">
    <a class = "horizontal-list-item" href="#">DE /</a>
    <a href="#"> RU</a>

    5. Один черт, 2 этажа.
    удаление класса из <li> или из <a>
    естественно ничего не меняет.
    File : http://jsfiddle.net/y1zku2vn/4/
    Воможно следует виски заменить коньяком.....
     
  12. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    @Vladchucha У тебя там вообще хаос я думал ты список создаешь в твоем случаи нужно делать один <a>RU / EN</a> если хочешь извращаться с инлайн тогда так http://jsfiddle.net/y1zku2vn/5/
     
    Vladchucha нравится это.
  13. MRSgiba

    MRSgiba Активный пользователь

    С нами с:
    22 дек 2017
    Сообщения:
    200
    Симпатии:
    32
    @Vladchucha, в css
    Код (CSS):
    1. #centeredmenu ul li a
    убери
    Код (CSS):
    1. display:block
    , и будет в линию, или переназначь стиль более явно. F12 - это вывод инструментов в браузере, можешь просто правой кнопкой мыши нажать и выбрать просмотреть код, если в chrome, или исследовать элемент, если FF
     
    Vladchucha нравится это.
  14. Vladchucha

    Vladchucha Активный пользователь

    С нами с:
    12 ноя 2018
    Сообщения:
    167
    Симпатии:
    7
    Адрес:
    Nürnberg
    Всем большое спасибо, вроде разобрался.
    Но вы не расслабляйтесь, медленно, но делаю дальше,
    а CSS оценивает мой интеллект крайне низко.
     
  15. paschaopencart

    paschaopencart Активный пользователь

    С нами с:
    18 май 2018
    Сообщения:
    118
    Симпатии:
    16
    Адрес:
    Урал
    Много мусора в коде пока, но все придет. Немного советов от старого версталы:
    1. Старайтесь соблюдать порядок вложенности:
    К примеру у вас родительский объект - <div id="..." а в нем уже может идти вложенность подобное (в данном случае) <ul class="...", <li class="...", и уникальность классов предусматривать только в случае необходимости, иначе пишите просто ul, li в псевдоклассе можно указать путь от родительского id до вложенного элемента
    2. Старайтесь не писать style="..." напрямую в коде, а выносите в отдельный файл стилей с расширением .css

    Все это приведет к удобочитаемости кода в первую очередь для себя, а равно отслеживание связей + правки "на лету" в браузере в Firebug (F12). В таком случае верстка Вам покорится и очень быстро, даже понравится)))
     
    #15 paschaopencart, 22 дек 2018
    Последнее редактирование: 22 дек 2018
  16. Vladchucha

    Vladchucha Активный пользователь

    С нами с:
    12 ноя 2018
    Сообщения:
    167
    Симпатии:
    7
    Адрес:
    Nürnberg
    Да, сам чувствую, порядок - это очень хорошо,
    спасибо за конкретные ЦУ.