CSS Flex растягивает ссылки
Итак, я немного больше узнаю об использовании CSS Flex вместо статического позиционирования контента. Тем не менее, я определил свои стили ссылок, а также выделенные жирным шрифтом. Я предполагаю, что он адаптируется к контейнеру, который находится внутри (который использует функцию гибкости), и поэтому он растягивается по размеру контейнера, в котором он находится. У меня вопрос, как мне это исправить? Я видел, что могу использовать "display: inline-block" для ссылки, но это не помогло.
Вот мой код:
.container{
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 80%;
margin: auto;
background-color:#fff;
overflow: hidden;
font-size: 15px;
line-height: 20px;
padding:1em;
}
.container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
a{
text-decoration:none;
border-bottom-style:double;
border-bottom-width:2px;
color:#99d3df;
display:inline-block;
padding:0px;
overflow: hidden;
}
i{
display:inline-block;
color:#88bbd6;
text-decoration:italic;
}
И что у меня есть:
This is a <a href = "http://google.com">Google Link</a><BR>
Google is <i>extremely helpful</i>!
Вот как это выглядит для справки. Проблемное изображение
Ответы 2
Похоже, вы пропустили div-оболочку .container в предоставленной вами разметке.
Посмотрим на этот код:
<!-- HTML -->
<div class = "container">
<span>This is a </span><a href = "http://google.com">Google Link</a
</div>
<div class = "container">
<span>Google is </span><i>extremely helpful</i>!
</div>
<!-- /HTML -->
/* CSS */
.container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
Свойство flex со значением 1100% означает, что мы говорим браузеру, что любые элементы (звездочка *), вложенные в .container, должны иметь ширину 100% от ширины их родительского элемента.
Я предлагаю вам просто удалить эту часть, чтобы решить проблему.
Вот мой подход к вашей разметке.
.container {
display: flex;
width: 80%; /* flexible value */
flex-direction: row; /* this is to make sure that we'll have side-to-side layout within .container */
}
a {
text-decoration: none;
border-bottom-style: double;
border-bottom-width: 2px;
color: #99d3df;
display: inline-block;
padding: 0px;
}
a, i{
margin-left: 5px; /* this is to give a 10px spacing */
}<div class = "container"><span>This is a </span><a href = "#">random link</a><span></span></div>
<div class = "container"><span>Google </span><i>is extremely helpful! </i></div>
Я понял, что забыл поместить текст в div .container, и поэтому он, похоже, работает нормально. В конце концов я понял, что это произошло из-за контейнера, и этот подход, похоже, решил мою проблему :) Спасибо