Wie man DIVs auf der Seite von Seite erscheint, ohne die HTML-Struktur zu ändern, nur mit CSS verwendetCSS

CSS verstehen
Anonymous
 Wie man DIVs auf der Seite von Seite erscheint, ohne die HTML-Struktur zu ändern, nur mit CSS verwendet

Post by Anonymous »

Ich möchte jeweils. /> < /ul>
Die .dropdown-Auswahl belegen 25% und das Telefon belegt einen Platz von 75%. Müssen CSS vollständig zur Positionierung verwenden. Versuchte verschiedene Techniken, nicht erfolgreich. PrettyPrint-Override ">

Code: Select all

/* Main container that holds all the input fields */
.contactFormContainer .field__group {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}

/* Ensure each .dropdown-select and .phone div takes up 50% of the container width */
.contactFormContainer .dropdown-select,
.contactFormContainer .phone {
display: flex;
flex-direction: column;
width: calc(50% - 5px);
/* Make sure each takes up 50% of the space with 5px margin */
}

/* Ensure input fields inside dropdown-select and phone take full width */
.contactFormContainer .dropdown-select__input,
.contactFormContainer .phone__container input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

/* The .text divs remain as block-level elements */
.contactFormContainer .text {
display: block;
margin-bottom: 10px;
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
.contactFormContainer .field__group {
flex-direction: column;
/* Stack everything vertically on small screens */
}

.contactFormContainer .dropdown-select,
.contactFormContainer .phone {
width: 100%;
/* Full width for small screens */
}
}< /code>




Personal eMail 1







Personal eMail 2







Personal eMail 3







Mobile No. 1











Mobile No. 2











Mobile No.  3











Mobile No. 4











Mobile No. 5











Mobile No. 6




















































Post Reply Previous topicNext topic

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post