将图像和文本与同一行对齐

我想在同一行中显示图像和文本'产品'。DIV是在Drupal中产生的。在显示的源页码中，如下所示。

我默认情况下有两个图像，悬停图像显示无，并且菜单图像出现在悬停之前。现在显示在两行。需要在一行中显示。

.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>

尽管li无效，但应用

display: flex;
align-items: center;

它将解决问题。

.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>

如果您将li替换为DIV，它仍然可以完成工作

.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>

添加

.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>

这是一个简单的解决方案，涉及 float向左侧的图像，因此一切都在同一条线上。

.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>

请检查此。

.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;
  }
  .offering-section{
      float: left;
  }

<div class=" col-sm-4 col-md-4 categoryMobileMenu">
	<a href="Offerings" >
		</a><li><a href="Offerings" class="offering-section">
		 <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>

只是更新

.field-content a {
    display:inline;
  }

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

检查此

<style>.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 {
    display:inline;
    float:left;
  } </style>
  
 <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>

希望它对您有用！

相关内容

最新更新

热门标签：