Bild und Text in derselben Zeile ausrichten

Ich möchte Bild und Text "Angebote" in derselben Zeile anzeigen. div werden in drupal generiert. Im Quellseitencode wie unten angezeigt.Bild und Text in derselben Zeile ausrichten

Ich habe zwei Bilder standardmäßig, schweben Bildanzeige keine und Menübild erscheinen vor dem Schweben. jetzt in zwei Zeilen angezeigt. Muss in einer Zeile angezeigt werden.

.categoryMobileMenu { 
 
    // display:none; 
 
} 
 

 
.categoryMenu { 
 
    background-color: #663399; 
 
    min-height: 110px; 
 
    font size: 18px; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
#sub_menu { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
.categoryMenu li { 
 
    list-style-type: none; 
 
} 
 

 
.menu-hover-image { 
 
    display: none; 
 
} 
 

 
.categoryMenu a { 
 
    color: #fff; 
 
    font size: 12px; 
 
} 
 

 
.categoryMobileMenu li { 
 
    list-style-type: none; 
 
} 
 

 
p { 
 
    display: inline; 
 
} 
 

 
.menu-image { 
 
    display: inline; 
 
} 
 

 
.field-content a { 
 
    display: inline; 
 
}

<div class=" col-sm-4 col-md-4 categoryMobileMenu"> 
 
    <a href="Offerings"> 
 
    </a> 
 
    <li> 
 
    <a href="Offerings"> 
 
     <div class="menu-image"> 
 
     <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div> 
 
     </div> 
 
     <div class="menu-hover-image"> 
 
     <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div> 
 
     </div> 
 
     <p></p> 
 
    </a> 
 
    <div class="field-content"> 
 
     <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div> 
 
    <p></p> 
 
    </li> 
 

 
</div>

Quelle

2017-05-08 user3386779

.Offerings.Menübild {float: links; } –

Anzeige verwenden: Inline-Block; oder float: left –

Du bist html ist ungültig - du scheinst ein zufälliges 'li' geworfen zu haben - li muss auch ein Kind von' ul' oder 'ol' sein, was ist mit allen leeren Ankern und p Tags - if Sie sind für Abstand, Sie sollten wirklich CSS für diesen Job verwenden – Pete

Obwohl die li ungültig ist,

display: flex; 
align-items: center;

es die Anwendung wird das Problem lösen.

.categoryMobileMenu { 
 
    // display:none; 
 
} 
 

 
.categoryMenu { 
 
    background-color: #663399; 
 
    min-height: 110px; 
 
    font size: 18px; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
#sub_menu { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
.categoryMenu li { 
 
    list-style-type: none; 
 
} 
 

 
.menu-hover-image { 
 
    display: none; 
 
} 
 

 
.categoryMenu a { 
 
    color: #fff; 
 
    font size: 12px; 
 
} 
 

 
.categoryMobileMenu li { 
 
    list-style-type: none; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
p { 
 
    display: inline; 
 
} 
 

 
.menu-image { 
 
    display: inline; 
 
} 
 

 
.field-content a { 
 
    display: inline; 
 
}

<div class=" col-sm-4 col-md-4 categoryMobileMenu"> 
 
    <a href="Offerings"> 
 
    </a> 
 
    <li> 
 
    <a href="Offerings"> 
 
     <div class="menu-image"> 
 
     <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div> 
 
     </div> 
 
     <div class="menu-hover-image"> 
 
     <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div> 
 
     </div> 
 
     <p></p> 
 
    </a> 
 
    <div class="field-content"> 
 
     <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div> 
 
    <p></p> 
 
    </li> 
 

 
</div>

Wenn Sie die li mit einem div ersetzen, wird es immer noch den Job

.categoryMobileMenu { 
 
    // display:none; 
 
} 
 

 
.categoryMenu { 
 
    background-color: #663399; 
 
    min-height: 110px; 
 
    font size: 18px; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
#sub_menu { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
.categoryMenu { 
 
    list-style-type: none; 
 
} 
 

 
.menu-hover-image { 
 
    display: none; 
 
} 
 

 
.categoryMenu a { 
 
    color: #fff; 
 
    font size: 12px; 
 
} 
 

 
.container { 
 
    list-style-type: none; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
p { 
 
    display: inline; 
 
} 
 

 
.menu-image { 
 
    display: inline; 
 
} 
 

 
.field-content a { 
 
    display: inline; 
 
}

<div class=" col-sm-4 col-md-4 categoryMobileMenu"> 
 
    <a href="Offerings"> 
 
    </a> 
 
    <div class="container"> 
 
    <a href="Offerings"> 
 
     <div class="menu-image"> 
 
     <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div> 
 
     </div> 
 
     <div class="menu-hover-image"> 
 
     <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div> 
 
     </div> 
 
     <p></p> 
 
    </a> 
 
    <div class="field-content"> 
 
     <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div> 
 
    <p></p> 
 
    </div> 
 

 
</div>

Quelle

2017-05-08 12:44:11

Added

.field-content { 
    display: inline-block; 
}

.categoryMobileMenu { 
 
    // display:none; 
 
} 
 

 
.categoryMenu { 
 
    background-color: #663399; 
 
    min-height: 110px; 
 
    font size: 18px; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
#sub_menu { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
.categoryMenu li { 
 
    list-style-type: none; 
 
} 
 

 
.menu-hover-image { 
 
    display: none; 
 
} 
 

 
.categoryMenu a { 
 
    color: #fff; 
 
    font size: 12px; 
 
} 
 

 
.categoryMobileMenu li { 
 
    list-style-type: none; 
 
} 
 

 
p { 
 
    display: inline; 
 
} 
 

 
.menu-image { 
 
    display: inline; 
 
} 
 

 
.field-content a { 
 
    display: inline; 
 
} 
 

 
.field-content { 
 
    display: inline-block; 
 
}

<div class=" col-sm-4 col-md-4 categoryMobileMenu"> 
 
    <a href="Offerings"> 
 
    </a> 
 
    <li> 
 
    <a href="Offerings"> 
 
     <div class="menu-image"> 
 
     <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div> 
 
     </div> 
 
     <div class="menu-hover-image"> 
 
     <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div> 
 
     </div> 
 
     <p></p> 
 
    </a> 
 
    <div class="field-content"> 
 
     <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div> 
 
    <p></p> 
 
    </li> 
 

 
</div>

Quelle

2017-05-08 12:31:49 athi

Hier ist eine einfache Lösung, die float ing das Bild auf der linken Seite beinhaltet, so dass die ev Alles ist auf der gleichen Linie.

.categoryMobileMenu { 
 
    // display:none; 
 
} 
 

 
.categoryMenu { 
 
    background-color: #663399; 
 
    min-height: 110px; 
 
    font size: 18px; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
#sub_menu { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 

 
.categoryMenu li { 
 
    list-style-type: none; 
 
} 
 

 
.menu-hover-image { 
 
    display: none; 
 
} 
 

 
.categoryMenu a { 
 
    color: #fff; 
 
    font size: 12px; 
 
} 
 

 
.categoryMobileMenu li { 
 
    list-style-type: none; 
 
} 
 

 
p { 
 
    display: inline; 
 
} 
 

 
.menu-image { 
 
    display: inline; 
 
} 
 

 
.field-content a { 
 
    display: inline; 
 
} 
 

 
.menu-image { 
 
    float:left; 
 
}

<div class=" col-sm-4 col-md-4 categoryMobileMenu"> 
 
    <a href="Offerings"> 
 
    </a> 
 
    <li> 
 
    <a href="Offerings"> 
 
     <div class="menu-image"> 
 
     <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div> 
 
     </div> 
 
     <div class="menu-hover-image"> 
 
     <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div> 
 
     </div> 
 
     <p></p> 
 
    </a> 
 
    <div class="field-content"> 
 
     <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div> 
 
    <p></p> 
 
    </li> 
 

 
</div>

Quelle

2017-05-08 12:31:57

Bitte dies überprüfen.

.categoryMobileMenu{ 
 
\t // display:none; 
 
    } 
 
    .categoryMenu{ 
 
\t background-color:#663399; 
 
\t min-height: 110px; 
 
\t font size : 18px; 
 
     color : #fff; 
 
\t text-align:center; 
 
\t 
 
    } 
 
    #sub_menu{ 
 
\t position:absolute; 
 
\t left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
\t 
 
    } 
 
    .categoryMenu li{ 
 
\t  list-style-type: none; 
 
    } 
 
    .menu-hover-image{ 
 
\t display:none; 
 
    } 
 
    .categoryMenu a { 
 
\t color:#fff; 
 
\t font size : 12px; 
 
\t } 
 
    .categoryMobileMenu li{ 
 
    list-style-type: none; 
 
    } 
 
    
 
    p{ 
 
    display:inline; 
 
    } 
 
.menu-image{ 
 
    display:inline; 
 
    } 
 
    .field-content a{ 
 
    display:inline; 
 
    } 
 
    .offering-section{ 
 
     float: left; 
 
    }

<div class=" col-sm-4 col-md-4 categoryMobileMenu"> 
 
\t <a href="Offerings" > 
 
\t \t </a><li><a href="Offerings" class="offering-section"> 
 
\t \t <div class="menu-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div></div> 
 
\t \t \t <div class="menu-hover-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div></div> 
 
\t \t \t <p></p></a><div class="field-content"><a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div><p></p> 
 
\t \t </li> 
 
\t 
 
    </div>

Quelle

2017-05-08 12:32:21

Aktualisieren Nur

.field-content a { 
    display:inline; 
    }

.field-content { 
    display:inline; 
    float:left; 
    }

prüfen diese

<style>.categoryMobileMenu{ 
 
\t // display:none; 
 
    } 
 
    .categoryMenu{ 
 
\t background-color:#663399; 
 
\t min-height: 110px; 
 
\t font size : 18px; 
 
     color : #fff; 
 
\t text-align:center; 
 
\t 
 
    } 
 
    #sub_menu{ 
 
\t position:absolute; 
 
\t left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
\t 
 
    } 
 
    .categoryMenu li{ 
 
\t  list-style-type: none; 
 
    } 
 
    .menu-hover-image{ 
 
\t display:none; 
 
    } 
 
    .categoryMenu a { 
 
\t color:#fff; 
 
\t font size : 12px; 
 
\t } 
 
    .categoryMobileMenu li{ 
 
    list-style-type: none; 
 
    } 
 
    
 
    p{ 
 
    display:inline; 
 
    } 
 
.menu-image{ 
 
    display:inline; 
 
    } 
 
    .field-content { 
 
    display:inline; 
 
    float:left; 
 
    } </style> 
 
    
 
<div class=" col-sm-4 col-md-4 categoryMobileMenu"> 
 
\t <a href="Offerings"></a><li><a href="Offerings"> 
 
\t \t <div class="menu-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div></div> 
 
\t \t \t <div class="menu-hover-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div></div> 
 
\t \t \t <p></p></a><div class="field-content"><a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div><p></p> 
 
\t \t </li> 
 
\t 
 
    </div>

Hoffe, es funktioniert für Sie!

Quelle

2017-05-08 12:36:50

Bild und Text in derselben Zeile ausrichten

Antwort

Verwandte Themen