Question

我有一点问题，我试图制作一个菜单，将项目与图像和其他项目与标签相结合，如附图中所示，但它并不起作用。

下一张图片显示了它当前的状态。有错误。

我已尝试使用此代码，但我的＆＃34;图片项目＆＃34;不要站在＆＃34;标签项＆＃34;旁边：

＆＃13;

.sprite-icons {
  background: url(../images/icons/sprite-icons_menu.png) no-repeat top left;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    width: 33px; height: 30px;
}

.sprite-icons.icon_home {
  background-position: 0px 0px;
 }
 
 .icon_home:hover{
  background-position: -48px 0px;
 }
 
.sprite-icons.icon_home_active {
  background-position: -48px 0px;
}

.sf-menu{
	border-bottom: 1px solid black;
	list-style-type:none;
	line-height: 1.0;
	text-align: center;
	padding: 10px 10px 8px 10px;
	float: left;
	width: 99%;
}

.sf-menu a{
	text-decoration: none;
	color: #606060;
	-webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
}

.sf-menu a:hover{
	color: #ffffff;
	background-color: #ee1c24;
	padding: 10px 6px 6px 6px;
	
}

.sf-menu li{
	display: inline;
	padding: 20px;
}

＆＃13;

<nav>
  <ul class="sf-menu">
    <li><a href="" title="Home">
      <div class="sprite-icons icon_home">
      </div></a>
    </li>
    <li><a href="">A EMPRESA</a></li>
    <li><a href="">SERVIÇOS</a></li>
    <li><a href="">SISTEMA</a></li>
    <li><a href="">TRABALHE CONOSCO</a></li>
    <li><a href="">CONTATO</a></li>
  </ul>
</nav>

＆＃13;

我该如何解决这个问题？

Answer 1

更好的解决方案应该是使用伪元素

<ul>
	<li><a href="#"><span class="icon-tutti"></span></a></li>
        <li><a href="#">Second Element</a></li>            
        <li><a href="#">Third Element</a></li>

</ul>

示例：

<?php
include('db.php');
$keySesso = $_GET['sesso'];
$keyEta = $_GET['eta'];
$keyRegione = $_GET['regione'];
$keyFoto = $_GET['foto'];

//sesso
if(isset($keySesso)){
if ($keySesso == 2) {
$FemminaE="selected";
}else if ($keySesso == 1){
$MaschioE="selected";
}else if ($keySesso == 26){
$Gay="selected";
}else if ($keySesso == 27){
$Lesbica="selected";
}else if ($keySesso == 29){
$FemminaB="selected";
}else if ($keySesso == 28){
$MaschioB="selected";
}else{
$sessoN="";
}
}
//for total count data
$countSql = "SELECT COUNT(last_activity) FROM _core_members INNER JOIN  _core_pfields_content ON _core_members.member_id = _core_pfields_content.member_id  $whereSQL $keyRegione $CondizioneEta $CondizioneFoto ";
$tot_result = mysqli_query($conn, $countSql);
$row = mysqli_fetch_row($tot_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);

//for first time load data
if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * $limit;  
$sql = "SELECT * FROM _core_members INNER JOIN  _core_pfields_content ON _core_members.member_id = _core_pfields_content.member_id  $whereSQL $keyRegione $CondizioneEta $CondizioneFoto ORDER BY last_activity DESC LIMIT $start_from, $limit";
$rs_result = mysqli_query($conn, $sql);
?>
<!DOCTYPE html>
<head>

</head>
<body >



<div class="BloccoBaseBO">


<div class="container" id="BOcontent">


<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="tab1">
<form method='GET' id='FormChattaCon' class='FormBase' action=''>
<select id="SelectedSesso" name="sesso">
<option value=""   <?php echo $sessoN; ?>>Tutti i generi</option>
<option value="2"  <?php echo $FemminaE; ?>>femmine (Etero)</option>
<option value="1"  <?php echo $MaschioE; ?>>maschi (Etero)</option>
<option value="26" <?php echo $Gay; ?>>Gay</option>
<option value="27" <?php echo $Lesbica; ?>>Lesbica</option>
<option value="29" <?php echo $FemminaB; ?>>Femmina (Bisex)</option>
<option value="28" <?php echo $MaschioB; ?>>Maschio (Bisex)</option>
</select>


<div class='ConFoto'>Con Foto: <input id="checkBox"  name="foto" type="checkbox"  onclick="javascript: submitform()" <?php echo $check;?>/> </div>


</form>

<table class="table table-bordered table-striped">
<tbody id="target-content">


<?php

while ($row = mysqli_fetch_assoc($rs_result)) {




echo "<div class='bloccoUserOnlineBO'></div><li class='NomeBloccoB'>$MemberName</li>";


}; 
?>
</tbody>
</table> 
<nav><ul class="pagination">
<?php if(!empty($total_pages)):for($i=0; $i<=$total_pages; $i++):
            if($i == 0):?>
            <li class='active'  id="<?php echo $i;?>"><a href='pagination.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
            <?php else:?>
            <li id="<?php echo $i;?>"><a href='pagination.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
        <?php endif;?>
<?php endfor;endif;?>
</ul>
</nav>

  </div>








</div>

</div>
<script type="text/javascript">
$(document).ready(function(){
$('.pagination').pagination({
        items: <?php echo $total_records;?>,
        itemsOnPage: <?php echo $limit;?>,
        cssStyle: 'light-theme',
		currentPage : 0,
		onPageClick : function(pageNumber) {
			jQuery("#target-content").html('loading...');
			jQuery("#target-content").load("pagination.php?page=" + pageNumber);
		}
    });
});
</script>
  
 <!-- tab -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/jquery.scrolling-tabs.js"></script>
<script>
$('.nav-tabs').scrollingTabs();
</script>

 <!-- FlexSlider -->
<script src="http://www..it/info-user-global/js/jquery.flexslider-min.js"></script>
<script src="http://www..it/info-user-global/js/main.js"></script>

<?php
include('db.php');

if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * $limit;

$sql = "SELECT * FROM ILFREE_core_members INNER JOIN  ILFREE_core_pfields_content ON ILFREE_core_members.member_id = ILFREE_core_pfields_content.member_id  $whereSQL $keyRegione $CondizioneEta $CondizioneFoto ORDER BY last_activity DESC LIMIT $start_from, $limit";
$rs_result = mysqli_query($conn, $sql);
?>

<?php
while ($row = mysqli_fetch_assoc($rs_result)) {

echo "<div class='bloccoUserOnlineBO'></div><li class='NomeBloccoB'>$MemberName</li>";


};
?>

您还可以使用图片网址作为内容，但使用图标应该更好。以tryAwesome为例。

如何使用图像和标签（HTML和CSS）创建菜单？

1 个答案: