Question

有一个徽标：

 <div class="logo"></div>

还有一些导航：

<ul class="bar">
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Skills</a></li>
       <li><a href="#">Contacts</a></li>
</ul>

我希望我的导航功能在手机上标识下。我的徽标居中，但我不知道如何将导航置于徽标下方。

这里的CSS：

.bar {
  position: relative;
  float: right;
  right: 9%;
  top: -60px;
  display: inline-block;
  font-size: 1.5em;
  font-family: 'Coming Soon', sans-serif;
 }

.bar li {
 display: inline-block;
 margin-left: 60px;
}

Answer 1

尝试仅为手机定义规则：

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1() { InitializeComponent(); }
        IScheduler scheduler;
        protected override void OnLoad(EventArgs e)
        {
            ISchedulerFactory schedFact = new StdSchedulerFactory();
            scheduler = schedFact.GetScheduler();
            scheduler.Start();
            JobDetail jobDetail = new JobDetail("SampleJob", null, typeof(SampleJob));
            Trigger trigger = TriggerUtils.MakeSecondlyTrigger(5); //Run every 5 seconds
            trigger.StartTimeUtc = DateTime.UtcNow;
            trigger.Name = "SampleJobTrigger";
            scheduler.ScheduleJob(jobDetail, trigger);
            base.OnLoad(e);
        }
        protected override void OnClosing(CancelEventArgs e)
        {
            scheduler.Shutdown(false);
            base.OnClosing(e);
        }
    }
    public class SampleJob : IJob
    {
        public SampleJob() { }
        public void Execute(JobExecutionContext context)
        {
            MessageBox.Show("DumbJob is executing.");
        }
    }
}

@media (max-width: 480px) {
.bar {
  //paste any mobile code here
}
                
.bar li {
  //paste any mobile code here
}
}
.bar {
  position: relative;
  float: right;
  right: 9%;
  top: -60px;
  display: inline-block;
  font-size: 1.5em;
  font-family: 'Coming Soon', sans-serif;
}

.bar li {
  display: inline-block;
  margin-left: 60px;
}

Answer 2

您可以使用CSS媒体查询。并应用您的属性，在我的情况下，我使用的是screen width <= 767px。

像：

/* On Mobiles */
@media screen and (max-width: 767px) {
  .bar {
    display: block;
    float: none;
    text-align: center;
    right: auto;
  }

  .bar li {
    display: block;
    margin: 0;
  }
}

请看下面的代码段：

＆＃13;

.logo {
  float: left;
  background: #eee;
  width: 100px;
  height: 50px;
  text-align: center;
  font-size: 1.5em;
  padding-top: 20px;
  margin: 0 auto;
}

.bar {
  position: relative;
  padding: 0;
  float: right;
  right: 9%;
  display: inline-block;
  font-size: 1.5em;
  font-family: 'Coming Soon', sans-serif;
 }

.bar li {
 display: inline-block;
 margin-left: 60px;
}

/* On Mobiles */
@media screen and (max-width: 767px) {
  .logo {
    float: none;
  }
  
  .bar {
    display: block;
    float: none;
    text-align: center;
    right: auto;
  }
  
  .bar li {
    display: block;
    margin: 0;
  }
}

＆＃13;

<div class="logo">Logo</div>
<ul class="bar">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Skills</a></li>
   <li><a href="#">Contacts</a></li>
</ul>

＆＃13;

希望这有帮助！

希望我的导航响应地以徽标为中心

2 个答案: