时间戳

首页 > 解决方案 > 如何使用@media 在同一行显示文本？

html - 如何使用@media 在同一行显示文本？

问题描述

我有一些文本，我已经能够使用@media查询将它们分离出来并显示在同一行上。

CSS 本身在没有@media查询的情况下在移动设备中工作，但在桌面上却没有，所以我在@media下面应用了一个在移动设备中工作的查询768px。但是，一旦我尝试通过上面的@media 查询768px（即768pxto ）将 CSS 应用到桌面5000px，它就不会显示我想要的方式。

基本上，我希望移动设备中的文本位于同一行，中间有一点空格，这是我已经实现的，在桌面上也是如此。

我的桌面@media查询不起作用。

这是我的 CSS 代码：

@media (max-width: 5000px) and (min-width: 768px) {
  .findanevent {
    float: left;
  }
}

@media (max-width: 5000px) and (min-width: 768px) {
  .event {
    float: right;
  }
}

这是我的 HTML 代码：

<div class="lasvegas">
Events</div>
<div class="findanevent"> </div>
<div class="event_wrapper"><a 
href="https://adsler.co.uk/find-an- 
event/"><span id="findanevent" 
class="event">Find an Event</span>. 
</a>
<a href="https://adsler.co.uk/post- 
an-event/"><span id="postanevent" 
class="event">Post an Event</span>. 
</a></div>

这是页面，如果有帮助：https ://adsler.co.uk/events/

标签： htmlcsswordpress

解决方案

您可以根据需要调整边距。

.event_wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 'a b c'
                       'd e f';
}


.Lable1{
  grid-area: b;
  text-align: center;
  line-height: 35px;
  font-size: 30px;
  margin-bottom: -70px;
}

.Lable2{
  grid-area: d;
  text-decoration: none;
  text-align: center;
  line-height: 35px;
  font-size: 30px;
  margin-left:20%;
}

.Lable3{
  grid-area:f;
  text-decoration: none;
  text-align: center;
  line-height: 35px;
  font-size: 30px;
  margin-right:20%;
}
	<div class="event_wrapper">
      <div class="Lable1"><h2>Events</h2><br></div>
		<div class="Lable2"><a href="https://adsler.co.uk/find-an-event/">
    <span id="findanevent" class="event">Find an Event</span>.</a></div>
		<div class="Lable3"><a href="https://adsler.co.uk/find-an-event/">
    <span id="findanevent" class="event">Find an Event</span>.</a></div>
		</div>	
	</div>

推荐阅读