Выровняйте два верхних гибких контейнера, когда один из контейнеров выровнен по центру
Хотя ответы, которые вы не можете проанализировать HTML с регулярными выражениями, верны, они не применяются здесь. OP просто хочет проанализировать один тег HTML с регулярными выражениями, и это то, что можно сделать с помощью регулярного выражения.
Предлагаемое регулярное выражение неверно:
<([a-z]+) *[^/]*?>
Если вы добавите что-то в регулярное выражение, путем обратного отслеживания его можно заставить сопоставить такие глупые вещи, как <a >>, [^/] слишком разрешительно. Также обратите внимание, что <space>*[^/]* является избыточным, поскольку [^/]* также может соответствовать пробелам.
Мое предложение было бы
<([a-z]+)[^>]*(?<!/)>
Где (?<! ... ) (в Perl-регулярных выражениях) отрицательный внешний вид. Он читает «a», затем слово, а затем все, что не является>, последнее из которых не может быть /, а затем> «.
Обратите внимание, что это позволяет такие вещи, как <a/ > ( как и исходное регулярное выражение), поэтому, если вы хотите что-то более ограничительное, вам нужно создать регулярное выражение для соответствия парам атрибутов, разделенных пробелами.
2 ответа
, чтобы поместить кнопку справа, вы должны установить панель навигации на 100% и дать автоматическое поле справа на левой панели навигации. как в примере ниже.
Я не понял, чего вы пытаетесь достичь с помощью изображения, поэтому, если бы вы могли дать больше деталей, я мог бы попытаться помочь.
.header {
background-color:green;
display: flex;
}
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
}
.navbar__items {
align-items: center;
display: flex;
}
.navbar__items > * {
margin-right: 0.75rem;
text-decoration: none;
}
.navbar__items & > *:last-child {
margin-right: 0;
}
.button {
background: red;
border-radius: .1875rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1rem;
letter-spacing: .0625rem;
padding: .375rem .75rem;
}
.bar-left {
margin-right: auto;
}
img{
position:absolute;
top:16px;
}<div class="header">
<div></div>
<div class="navbar">
<div class="bar-left navbar__items">
<img src="https://via.placeholder.com/50" />
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
<a href="">Link 4</a>
</div>
<div class="navbar__items">
<a href="">Link R1</a>
<a class="button" href="">Button</a>
</div>
</div>
</div> Если бы я понял ваши потребности, это было бы то, что вы ищете? Мне пришлось определить явную высоту для вашего заголовка, поскольку в flexbox нет ничего, что могло бы выровнять элемент по верху другого элемента, оно может выровнять элементы по базовой линии, но я думаю, что это не то, что вы хотите.
Так что мне пришлось учесть размер, позволяющий поместить изображение в конец гибкого контейнера вертикально, чтобы оно совпало с верхом текста. Дайте мне знать!
.header {
background-color:green;
display: flex;
height: 89px;
}
.navbar {
display: flex;
justify-content: space-between;
width: 100%;
}
.navbar__items {
align-items: center;
display: flex;
vertical-align: text-top;
}
.navbar__items > * {
margin-right: 0.75rem;
text-decoration: none;
}
.navbar__items & > *:last-child {
margin-right: 0;
}
.button {
background: red;
border-radius: .1875rem;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1rem;
letter-spacing: .0625rem;
padding: .375rem .75rem;
}
.right {
margin-left: auto;
}
.image {
display:block;
}
.box {
align-self: flex-end;
}<div class="header">
<div class="box"><img src="https://via.placeholder.com/50" class="image"/></div>
<div class="navbar">
<div class="navbar__items">
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
<a href="">Link 4</a>
</div>
<div class="navbar__items right">
<a href="">Link R1</a>
<a class="button" href="">Button</a>
</div>
</div>
</div>