Ли Проблемы с форматированием текста Пожалуйста, помогите? - PullRequest
Новая
       17

Ли Проблемы с форматированием текста Пожалуйста, помогите?

0 голосов
/ 08 сентября 2011

У меня есть выпадающее меню, которое в данный момент имеет другой цветной заголовок над различными разделами в меню, например,

Заголовок (colour1)

опция1 (цвет2)

(сверху и снизу)

Я хотел бы изменить это так, чтобы в списке это выглядело следующим образом (два цвета в одной строке):

Заголовок (цвет1) Вариант1 (цвет 2)

(бок о бок)

Ранее я задал вопрос о том, как это исправить, и получил ответ. Однако пункты списка все еще идут выше и ниже, а не рядом.

CSS выглядит так: 

#drop {
    font-size: 12px;
    font-weight:bold;
    position: fixed;
    z-index:inherit;
    left: 183px;
    width:700px;
    top: 15px;
    }

#drop ul {
    background: #fff;
    list-style-type: none;      
    }

#drop ul li {
    width: 750px;
    float: left;
    list-style-type: none;      
    margin: 0 10px -10 0;
    }

#drop ul li span {
    display: block;
    list-style-type: none;      
    padding: 1px 3px;
    }

#drop ul li ul {
    background: #fff;
    opacity: 0.9;
    list-style-type: none;      
    display: none; 
    padding: 0 0em 0.5em 0;
    }

#drop ul li:hover ul {
    list-style-type: none;      
    opacity: 0.9;
    }

#drop ul li ul li {
    border: none;       
    list-style-type: none;  
    float: none;
    padding-left:0px;
    }

#drop ul li ul li a {
    display: block;
    color: #808285;
    text-decoration: none;
    cursor:pointer;
    }


#drop ul li ul li a:hover {
    background: #d8d8dc;
    }


#drop ul li.section-title SPAN.section-title {
    color:#434442;
    margin-left: -3px;
    }

span.nav-title {
    border-bottom: 1px solid #808285;   
    position:fixed;
    left: 223px;
    width:744px;
    top: 28px;
    cursor:pointer;

    }

И HTML, как это: 

<div id="dropbox"></div>
                    <div id="Dropp style="position:relative;z-index:1000">
<div id="drop" style="position:absolute;z-index:3000">
    <ul>
        <li id="dropbox"><span class="nav-title" style="z-index:3000">Deutsche Börse Photography Prize 2011</span> <div class="nav-title" id="triangle">
                    </div>
            <ul id="ddd" class="subnav" style:"display: none;" >
                <br>
            <br>
            <br>
            <li>—</li>
            <li class="section-title">
                <span class="section-title">Photographers Gallery</span>
            </li>
                <li><a href="Deutsche Börse Photography Prize 2011.html">Deutsche Börse Photography Prize 2011</a></li>
                <li><a href="#">Deutsche Börse Photography Prize 2010</a></li>

И вот пример его использования здесь: www.deanpauley.co.uk/O-SB/categories.html

Мне был дан совет изменить его на: 

<ul>
    <li class="section"><span class="title">Title 1</span><span class="content">Color 2</span></li>
    <li class="section"><span class="title">Title 1</span><span class="content">Color 2</span></li>
    <li class="section"><span class="title">Title 1</span><span class="content">Color 2</span></li>
</ul>

Кто-нибудь может помочь? Это связано с отступом / полями, что текст не будет идти на той же строке?

1 Ответ

0 голосов
/ 08 сентября 2011

Не уверен, что это именно то, что вы имеете в виду, но он достигнет того, что, я думаю, вы хотите! 

<ul>
    <li class="section" style="overflow:hidden">
        <span class="title" style="display:block; float:left; width:somewidth">Title Color 1</span>                        
        <ul class="content" style="width:somewidth; float:left">
            <li>Content Color 2</li>
            <li>Content Color 2</li>
            <li>Content Color 2</li>
            <li>Content Color 2</li>
        </ul>
    </li>
</ul>

Извините за встроенные стили, но я ленивый сегодня днем:)

Это приведет к:

Цвет заголовка 1 -> Цвет содержимого 2-> _ __ _ __ _ ___ Цвет содержимого 2-> __ _ __ _ __ _ __ Цвет содержимого 2-> _ __ _ __ _ ____ Цвет содержимого 2

Замените 'somewidth' на значения ширины, которые вам нужны - это сделает его более равномерным и менее глючным, чем при использовании автоматической ширины.Но вы можете использовать автоматическую ширину и добавить стили для ie6 - что не будет играть в мяч!

...