CSS: увеличить ширину для элементов списка

Я новичок в css, и в настоящее время я пытаюсь разделить экран на две части и поместить текст слева и справа. Однако, по какой-то причине право «коробка» не покрывает всю правую часть экрана, только как 200-300 пикс ...CSS: увеличить ширину для элементов списка

JSFiddle: https://jsfiddle.net/19mw8hzL/

Черный текст должен достичь к в правой части экрана.

<div class="wrapper"> 
    <div id="one"> 
    <p class="w-text-1">Strategy</p> 
    </div> 
    <div id="two"> 
    <ul> 
     <li><a href="#">Visioning</a></li> 
     <li><a href="#">Strategic Analysis</a></li> 
     <li><a href="#">Strategy Formulation</a></li> 
     <li><a href="#">Business Model Innovation</a></li> 
     <li><a href="#">Financial Modeling</a></li> 
    </ul> 
    </div> 
</div>

источник

2017-01-18 kandreas127

Основываясь на CSS в связанном примере, я предполагаю, что линий Ли '#two li: nth-child (4): before {display: block; content: '';} 'несут ответственность за обертывание текста, поэтому не принимают полную ширину. Удаление его и назначение ширины контейнера могут решить эту проблему ... если вы имеете в виду слева направо (а не сверху вниз). – Yemachu

Flexbox может сделать это.

.w-text-1 { 
 
    font-family: 'Garamond', serif; 
 
    color: rgba(163, 42, 46, 1); 
 
    font-size: 35px; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
} 
 
.wrapper div { 
 
    color: #fff; 
 
} 
 
#one { 
 
    width: 20%; 
 
} 
 
#two { 
 
    flex: 1; 
 
    background: lightblue; 
 
    text-align: right; 
 
} 
 
#two a { 
 
    text-decoration: none; 
 
    font-family: 'Gotham', sans-serif; 
 
    font-size: 17px; 
 
    color: #000; 
 
    border: 1px solid grey; 
 
} 
 
#two ul { 
 
    overflow: hidden; 
 
    padding: 0; 
 
} 
 
#two li { 
 
    display: inline-block; 
 
    margin: 5px 0 0 0; 
 
}

<div class="wrapper"> 
 
    <div id="one"> 
 
    <p class="w-text-1">Strategy</p> 
 
    </div> 
 
    <div id="two"> 
 
    <ul> 
 
     <li><a href="#">Visioning</a> 
 
     </li> 
 
     <li><a href="#">Strategic Analysis</a> 
 
     </li> 
 
     <li><a href="#">Strategy Formulation</a> 
 
     </li> 
 
     <li><a href="#">Business Model Innovation</a> 
 
     </li> 
 
     <li><a href="#">Financial Modeling</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

источник

2017-01-18 11:36:57

Изменение CSS для #two, чтобы добавить в 20% из #one, чтобы сделать 100%:

#two { 
    float: left; 
    overflow: hidden; 
    width: 76%; /* this is completing the width with the 4% padding */ 
    padding-top: 17px; 
    padding-right: 4%; 
}

источник

2017-01-18 11:22:13

Или просто 'float: right;' –

@MrLister Нет, это не сработает, OP хочет полную ширину, а не авто ширину, плаваемую справа. –

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

Привет, пожалуйста, изменить эти

Позволяет сделать родительский элемент 100%, и чтобы дети делились по 50% каждый

.wrapper { 
    width : 100%; 
} 

#one { 
    float:left; 
    width:50%; 
}

шириной до 46%, потому что мы дали отступы право как 4%, так что (46 + 4 = 50)

#two { 
    float: right; 
    width: 46%; 
    padding-top: 17px; 
    padding-right: 4%; 
}

источник

2017-01-18 11:28:21 M3ghana

*{ 
    box-sizing: border-box; 
}

Это удалит заполнение в виде части ширины всех элементов. Не используйте '*' в качестве селектора, поскольку он очень тяжелый для DOM.

#two { 
    width: 80%; 
}

Потому что 20% + 80% = 100%

#two li { 
    display: inline-block; 
}

Это добавит ширину и высоту до

источник

2017-01-18 11:40:36 Gezzasa

CSS: увеличить ширину для элементов списка

ответ

Смежные вопросы