Я пытаюсь разместить значок справа от заголовка карты, но у меня это не получается.
Вот мой код:
.btn {
display: inline-block;
}
.fa-pen {
float: right;
display: inline-block;
font-size: 0.75rem;
}
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity = "sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin = "anonymous">
<div class = "accordion" id = "accordionExample">
<div class = "card">
<div class = "card-header" id = "headingOne">
<h2 class = "mb-0">
<button class = "btn btn-link text-left" type = "button" data-toggle = "collapse" data-target = "#collapseOne" aria-expanded = "true" aria-controls = "collapseOne">
Collapsible Group Item #1
</button>
<a class = "modificationUtilisateur" href = "https://www.google.fr/" id = "">
<i class = "fas fa-pen fa-pen-indicateur" title = "Modifier"></i>
</a>
</h2>
</div>
<div id = "collapseOne" class = "collapse show" aria-labelledby = "headingOne" data-parent = "#accordionExample">
<div class = "card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Вы знаете, почему мой значок находится в правом верхнем углу моего <h2>
вместо того, чтобы оставаться на той же линии, что и моя кнопка?
Вот еще одна ссылка: codepen.io/anon/pen/KLZgNE
Код в вопросе - Не ссылка
.btn {
display: inline-block;
}
h2{
display:flex;
align-items:center;
}
.fa-pen {
float: right;
display: inline-block;
font-size: 0.75rem;
}
a{
overflow:hidden;
margin-left: auto;
}
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity = "sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin = "anonymous">
<div class = "accordion" id = "accordionExample">
<div class = "card">
<div class = "card-header" id = "headingOne">
<h2 class = "mb-0">
<button class = "btn btn-link text-left" type = "button" data-toggle = "collapse" data-target = "#collapseOne" aria-expanded = "true" aria-controls = "collapseOne">
Collapsible Group Item #1
</button>
<a class = "modificationUtilisateur" href = "https://www.google.fr/" id = "">
<i class = "fas fa-pen fa-pen-indicateur" title = "Modifier"></i>
</a>
</h2>
</div>
<div id = "collapseOne" class = "collapse show" aria-labelledby = "headingOne" data-parent = "#accordionExample">
<div class = "card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Попробуйте добавить этот CSS
.modificationUtilisateur{
float: right;
margin-top:15px
}
для 2 встроенных элементов вы можете использовать text-align-last
и отбросить float
:
.card-header#headingOne h2.mb-0 {
text-align-last:justify
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last
The text-align-last CSS property sets how the last line of a block or a line, right before a forced line break, is aligned.
Поскольку у вас есть одна строка, она также является последней.
демо ниже, запустите сниппет
.card-header#headingOne h2.mb-0 {
text-align-last: justify
}
.fa-pen {
font-size: 0.75rem;
}
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity = "sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin = "anonymous">
<div class = "accordion" id = "accordionExample">
<div class = "card">
<div class = "card-header" id = "headingOne">
<h2 class = "mb-0">
<button class = "btn btn-link text-left" type = "button" data-toggle = "collapse" data-target = "#collapseOne" aria-expanded = "true" aria-controls = "collapseOne">
Collapsible Group Item #1
</button>
<a class = "modificationUtilisateur" href = "https://www.google.fr/" id = "">
<i class = "fas fa-pen fa-pen-indicateur" title = "Modifier"></i>
</a>
</h2>
</div>
<div id = "collapseOne" class = "collapse show" aria-labelledby = "headingOne" data-parent = "#accordionExample">
<div class = "card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
flex также может выполнять эту работу:
.card-header#headingOne h2.mb-0 {
display:flex;
justify-content:space-between;
}
демо ниже, запустите сниппет
.card-header#headingOne h2.mb-0 {
display:flex;
justify-content:space-between;
}
.fa-pen {
font-size: 0.75rem;
}
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin = "anonymous"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin = "anonymous"></script>
<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity = "sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin = "anonymous">
<div class = "accordion" id = "accordionExample">
<div class = "card">
<div class = "card-header" id = "headingOne">
<h2 class = "mb-0">
<button class = "btn btn-link text-left" type = "button" data-toggle = "collapse" data-target = "#collapseOne" aria-expanded = "true" aria-controls = "collapseOne">
Collapsible Group Item #1
</button>
<a class = "modificationUtilisateur" href = "https://www.google.fr/" id = "">
<i class = "fas fa-pen fa-pen-indicateur" title = "Modifier"></i>
</a>
</h2>
</div>
<div id = "collapseOne" class = "collapse show" aria-labelledby = "headingOne" data-parent = "#accordionExample">
<div class = "card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
Flex также может сделать это:
h2.mb-0 {
display: flex;
justify-content: space-between;
align-items: center;
}
Вы видели: https://codepen.io/iamponsiva/pen/mYpWVB
Кроме того, BS4 не использует поплавки... он основан на flexbox.