html - 有一些边界问题
问题描述
我正在为餐厅制作网页。设计说,我需要在页面选择器之间留一条线。已经尝试过一些东西,但事情奏效了。
它是 HTML5 和 CSS3。
* {
margin: 0em;
padding: 0em;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
background: url(https://images.unsplash.com/photo-1526234362653-3b75a0c07438?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80) black no-repeat center center fixed;
background-size: cover;
}
h1 {
color: white;
font-size: 50px;
text-transform: uppercase;
text-align: center;
font-weight: normal;
padding: 5% 0 13%;
}
ul {
list-style-type: none;
padding: 10px 20px;
background: black;
box-shadow: 0px 0px 50px 50px rgba(0,0,0,0.95);
border-radius: 10px;
}
a:link {
color: white;
text-decoration: none;
}
a:visited {
color: white;
}
a:hover {
line-height: 0 !important;
transform: scale(1.5) !important;
transition: all 1s ease !important;
color: wheat;
}
.menu {
font-size: 32px;
width: 75%;
margin: auto;
max-width: 960px;
}
.left {
float: left;
text-align: right;
border-right: solid white;
padding-right: 25px;
}
.right {
float: right;
text-align: left;
border-left: solid white;
padding-left: 25px;
}
a {
list-style-position: inside;
border: 1px solid white;
}
<body>
<header>
<h1 class="home-header">Restoran</h1>
</header>
<div class="menu">
<div class="left">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Menu">Menu</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Reservation">Reservation</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Deals">Deals</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Shop">Shop</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Events">Events</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Gallery">Gallery</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="Contact">Contact</a></li>
<li><a asp-area="" asp-controller="Restoran" asp-action="AboutUs">About Us</a></li>
</ul>
</div>
</div>
</body>
我希望一切都没有那么糟糕 :D 真的需要这个帮助!
这就是我想要的: https ://imgur.com/zxUhiSu/
解决方案
<body>
<header>
<h1 class="home-header">Restoran</h1>
</header>
<div class="menu">
<div class="left">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Menu">Menu</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Reservation">Reservation</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Deals">Deals</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Shop">Shop</a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a asp-area="" asp-controller="Restoran" asp-action="Events">Events</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Gallery">Gallery</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="Contact">Contact</a></li><hr>
<li><a asp-area="" asp-controller="Restoran" asp-action="AboutUs">About Us</a></li>
</ul>
</div>
</div>
对于 CSS,我建议你不要使用!important
一个示例jsfiddle
推荐阅读
- python - 为什么在可视化 Keras 模型时更改图例字体大小时会出错?
- google-cloud-platform - GC Deployment Manager 使用 Jinja 模板安装 PHP
- python - Blogger API Json 中的“id”表示什么?
- css - 扩展内容脚本(JS/或 CSS)不适用
- flutter - 如何使屏幕在颤动中可滚动?
- html - 将背景图片定位在 CSS 底部
- python - Python xml - 删除空格以获取对齐的 xml 文档
- javascript - 添加自定义标签会停止呈现页面
- oracle - 我想在 PL/SQL 中解决这个问题 EXCEPTION 命令不起作用
- database - 基于条目更新周期开始日期的算法