I want the Please update the following class. Changes made: Removed top: 0.8em; and just added float:left. The issue is h4 tag occupied full width and div tag is logically set in new line aligned with right side. You just need to use Try adding float left to your H4 the problem is that h4 is displayed as a block element, then it push your floating right element to the bottom... Correct with this ://Accordion-----------------------------------------------
$(document).ready(function() {
$(".accordion-desc").fadeOut(0);
$(".accordion").click(function() {
$(".accordion-desc").not($(this).next()).slideUp('fast');
$(this).next().slideToggle(400);
});
});
$(".accordion").click(function() {
$(".accordion").not(this).find(".rotate").removeClass("down");
$(this).find(".rotate").toggleClass("down");
});
//-----------------------------------------------------------body {
background-color: #eee;
font-family: "Open Sans", sans-serif;
}
header {
background-color: #2cc185;
color: #fff;
padding: 2em 1em;
margin-bottom: 1.5em;
}
h1 {
font-weight: 300;
text-align: center;
}
.container {
position: relative;
margin: 0 auto;
}
button {
background-color: #2cc185;
color: #fff;
border: 0;
padding: 1em 1.5em;
}
button:hover {
background-color: #239768;
color: #fff;
}
button:focus {
background-color: #239768;
color: #fff;
}
.accordion {
position: relative;
background-color: #fff;
display: inline-block;
width: 100%;
border-top: 1px solid #f1f4f3;
border-bottom: 1px solid #f1f4f3;
font-weight: 700;
color: #74777b;
vertical-align: middle;
}
/*Rotation-------------------------------------*/
.accordion .fa {
position: relative;
float: right;
}
.rotate {
-moz-transition: all 0.1s linear;
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.rotate.down {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/*------------------------------------------*/
.link {
text-align: right;
margin-bottom: 20px;
margin-right: 30px;
}
.accordion h4 {
position: relative;
top: 0.8em;
margin: 0;
font-size: 14px;
font-weight: 700;
}
.accordion a {
position: relative;
display: block;
color: #74777b;
padding: 1em 1em 2.5em 1em;
text-decoration: none;
}
.accordion a:hover {
text-decoration: none;
color: #2cc185;
background-color: #e7ecea;
transition: 0.3s;
}
.accordion-desc {
background-color: #f1f4f3;
color: #74777b;
z-index: 2;
padding: 20px 15px;
}
@media (min-width:480px) {
.container {
max-width: 80%;
}
}
@media (min-width:768px) {
.container {
max-width: 1000px;
}
}
.accordion-desc p {
word-break: break-all;
}
.status {
position: relative;
float: right;
right: 20%;
vertical-align: middle;
}
.btn {
margin-top: 10px;
}
Solved
.accordion h4 {
position: relative;
margin: 0;
font-size: 14px;
font-weight: 700;
float: left;
}
display:inline-block to align @item.Title to @Resource.AccordionStatus :.accordion h4, .accordion .status {
display:inline-block;
}
.accordion .status {
top: 0.8em;
}
.accordion h4 {
position: relative;
/* top: 0.8em; */
margin: 0;
font-size: 14px;
font-weight: 700;
float: left;
}
.accordion h4 {
position: relative;
margin: 0;
font-size: 14px;
font-weight: 700;
display: inline-block;
}
Saturday, August 18, 2018
Aligning div inside anchor
@Resource.AccordionStatus
div to be aligned with the '@item.Title'. The div is currently getting centered vertically.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment