我创建了一个类似http://www.bbc.com/persian的新闻网站。
顶部标题中存在问题。
我希望将所有元素放在一行中,但它们位于Link
下 <a>
文字装饰不起作用。
如何解决?
**
**
body {
float: right;
direction: rtl;
margin: 0;
padding: 0;
}
.iri-Header {
width: 1349px;
height: 40.5px;
background-color: red;
}
a {
text-decoration: none;
}
.iri-Header-container {
width: 1008px;
height: 40.5px;
padding: 0 16px;
margin: 0 auto;
background-color: blue;
position: relative;
vertical-align: baseline;
}
.logo {
width: 92px;
height: 39.5px;
background-color: yellow;
padding-left: 8px;
}
.logo img {
padding-top: 7px;
}
.iri-login {
width: 167.05px;
height: 39.5px;
background-color: violet;
float: right;
border-right-style: solid;
border-color: #000000;
border-right-width: 1px;
border-bottom-color: #1083b5;
cursor: pointer;
}
.iri-login:hover {
border-bottom-style: solid;
border-color: #000000;
}
.statusbar {
background-color: red;
margin-left: 40px;
margin-top: 10px;
margin-right: 10px;
font-family: 'Iranian Sans';
}
.statusbar a span {
text-decoration: none;
}
.icon-login img {
width: 30px;
height: 30px;
float: left;
margin-top: -24px;
margin-left: 2px;
}
.nav-link {
width: 505.5px;
height: 39.5px;
background-color: aqua;
border-right:1px solid black;
}
.nav-search {
width: 208px;
height: 38.5px;
background-color: red;
font-family: 'Iranian Sans';
border-right:1px solid black;
}
.search-form {
background-color: black;
width: 208px;
height: 38.5px;
}
.row {
padding-top: 2px;
}
&#13;
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Site IR</title>
<link href="StyleSheet/StyleSheet.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.1.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="iri-Header">
<div class="iri-Header-container">
<div class="logo">
<a href="#">
<img src="img/Logo.png" />
</a>
</div>
<div class="iri-login">
<div class="statusbar">
<a href="#"><span id="login-txt">Login</span></a>
</div>
<div class="icon-login">
<img src="img/pic1.png" />
</div>
</div>
<div class="nav-link">
<a href="#"></a>
</div>
<div class="nav-search">
<div class="row">
<!-- /.col-lg-6 -->
<div class="col-xs-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="جستجو کن . . .">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search
"></span>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
</div>
</div>
</div>
</form>
</body>
</html>
&#13;
答案 0 :(得分:1)
在链接元素
中尝试 border:0;答案 1 :(得分:0)
body {
float: right;
direction: rtl;
margin: 0;
padding: 0;
}
.iri-Header {
width: 1349px;
height: 40.5px;
background-color: red;
}
a {
text-decoration: none;
}
.iri-Header-container {
width: 1008px;
height: 40.5px;
padding: 0 16px;
margin: 0 auto;
background-color: blue;
position: relative;
vertical-align: baseline;
}
.logo {
width: 92px;
height: 39.5px;
background-color: yellow;
padding-left: 8px;
}
.logo img {
padding-top: 7px;
}
.iri-login {
width: 167.05px;
height: 39.5px;
background-color: violet;
float: right;
border-right-style: solid;
border-color: #000000;
border-right-width: 1px;
border-bottom-color: #1083b5;
cursor: pointer;
}
.iri-login:hover {
border-bottom-style: solid;
border-color: #000000;
}
.statusbar {
background-color: red;
margin-left: 40px;
margin-top: 10px;
margin-right: 10px;
font-family: 'Iranian Sans';
}
.statusbar a span {
text-decoration: none;
}
.icon-login img {
width: 30px;
height: 30px;
float: left;
margin-top: -24px;
margin-left: 2px;
}
.nav-link {
width: 505.5px;
height: 39.5px;
background-color: aqua;
border-right:1px solid black;
}
.nav-search {
width: 208px;
height: 38.5px;
background-color: red;
font-family: 'Iranian Sans';
border-right:1px solid black;
}
.search-form {
background-color: black;
width: 208px;
height: 38.5px;
}
.row {
padding-top: 2px;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Site IR</title>
<link href="StyleSheet/StyleSheet.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.1.0.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="iri-Header">
<div class="iri-Header-container">
<div class="logo">
<a href="#">
<img src="img/Logo.png" />
</a>
</div>
<div class="iri-login">
<div class="statusbar">
<a href="#"><span id="login-txt">Login</span></a>
</div>
<div class="icon-login">
<img src="img/pic1.png" />
</div>
</div>
<div class="nav-link">
<a href="#"></a>
</div>
<div class="nav-search">
<div class="row">
<!-- /.col-lg-6 -->
<div class="col-xs-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="جستجو کن . . .">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search
"></span>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
</div>
</div>
</div>
</form>
</body>
</html>