Here is a definition list with a specific styling:
dl {
margin: 0;
}
dl.interview dt {
color: #A8A67A;
}
dl.interview dd {
margin-left: 0;
}
.interview dt:before {
content: 'Q. ';
}
.interview dd:before {
content: 'A. ';
}
dt {
margin-top: 1em
}
dd {
font-style: italic;
padding: 0;
}
Is there a way to make each consecutive pair of questions and answers align alternately on the left and right side?
To achieve this, I recommend using the nth-of-type selector. I made some adjustments to the margin on the dl.interview dt and set a 0 margin to the top (dl, dl dt, dl dd).
I hope you find this solution helpful.
dl, dl dt, dl dd {
margin: 0;
}
dl.interview dt {
color: #A8A67A;
}
dl.interview dd {
/*margin-left: 0;*/
}
.interview dt:before {
content: 'Q. ';
}
.interview dd:before {
content: 'A. ';
}
dt {
margin-top: 1em
}
dd {
font-style: italic;
padding: 0;
}
dd:nth-of-type(even){margin-left:65%;}
dt:nth-of-type(even){margin-left:65%;}<dl class="interview">
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>I believe I have grasped the essence of your query. For my illustration, I included
dt, dd {
margin-top: 1em;
float: left;
width: 50%;
}
and eliminated
dd {
margin-top: 1em;
}
My assumption is that Q and A should align at the same level.
Please refer to this link: https://codepen.io/anon/pen/gJaqKW
This issue can also be resolved using flexbox or grid layout. I opted for a simpler approach for starters ;)
I trust this information proves helpful to you.
After setting up a test site for a client to review as part of a proof of concept, I noticed an unexpected white line while checking across different browsers. (loading correctly in all browsers except FF) In Firefox, there appears to be a thin ~10px li ...
Hello, I am interested in learning how to draw a rectangle to select multiple items using Angular 2+. I currently have a working Plunker example where I would like to implement the ability to select items by drawing a rectangle similar to this jsfiddle I ...
I recently integrated Chakra UI for styling a project on Next.js, and while most components are functioning properly, I am facing challenges with implementing responsive layouts. The styles do not seem to adapt when the screen size is reduced. Here's ...
I am looking to format text list elements in a way that they wrap like sentences within a paragraph. Here is the accompanying HTML & CSS code snippet that demonstrates how li element behaves when it exceeds the width of the ul container. ul { ...
I've implemented a fading effect on elements in my page using the following script: $(document).ready(function() { $('#holder').delay(650).fadeIn(1000); $('#sidepanelHolder').delay(650).fadeIn(1000); $( ...
I'm trying to create a login form with the username and password fields centered in the middle of the screen using the Zurb Foundation package. Unfortunately, I'm struggling to get things aligned vertically. This is the code I have: <!DOCTYP ...
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <% campground.images.forEach((img,i)=> { %> ...
Having trouble articulating my query, so here's a fiddle: https://jsfiddle.net/8zsqydj0/ .background-img-wrapper:before { content: ""; top: 0; left: 0; position: absolute; height: 100%; width: 100%; background: linear-gradient(to righ ...
I'm still learning HTML/CSS and decided to implement a navbar menu from Bootstrap documentation. However, I encountered an issue where the Dropdown menu and other links are not functioning properly. Here is the code for the navbar: <!-- Head --& ...
I'm having trouble aligning my textboxes with my form in Bootstrap within ASP.NET MVC 4. Despite using the form-horizontal div, my elements are displaying misaligned. How can I ensure that the elements align properly with the labels? <div clas ...
Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box? .form-item-custom-search-types::before { ...
My dilemma is with a modal dialog containing an image of fixed width set at 1500px. I want the image to maintain this size and for scroll bars to appear on smaller screen sizes, allowing users to scroll through the entire image. Essentially, I need the mod ...
The use of pseudo elements in Material-UI makeStyles is not functioning correctly. innerBox: { borderRadius: "10px", background: "#fff", boxShadow: "0px 1px 3px 0px rgba(0, 0, 0, 0.36)", maxHeight: "50px", "& ...
I am currently dealing with some style issues. How can I apply the styling of the parent tag to the child tag when hovering over it? Let's illustrate this with a simple example. .outer:hover { background: yellow; z-index: 1; position: relativ ...
Exploring the use of div to create the desired layout but struggling to achieve my goal .skills-container { height:50px; /* aiming for around 50px */ padding:5px; } .skill-pic { width:48px; height:48px; } .skill-content { } .skill-content p { } .progres ...
This task is giving me a headache. We're almost finished with revamping our website. The last step involves consolidating all the glyphs and icons into a sprite. These images are transparent .png files, so we made sure the sprite maintains transparen ...
After creating a spa with vue.js for the frontend, I utilized the vuetify library for various components and layout. While everything looked great locally, upon deploying to Azure, all vuetify styling seemed to disappear. My custom css was still applying ...
I am looking to create a landing page for my project similar to the design on this website. I am using Bootstrap 4 and HTML, but struggling to hide the background image behind the navigation bar. Can anyone help with this issue? ...
Having some issues with a select element in IE9. The links that should open the wiki page are not functioning properly only on IE9, and there is also an issue with the hover effect - the icon gets overridden by the background color when hovering over help ...
I created a personalized library using Material UI. The JSX code I am using is displayed below; <MyLayout container spacing={2}> <MyLayout item xs={9}> <MyComp1 /> </MyLayout> <MyLayout ite ...