显示行

时间:2016-07-22 11:37:57

标签: css css3

我创建了一个类似http://www.bbc.com/persian的新闻网站。

顶部标题中存在问题。

我希望将所有元素放在一行中,但它们位于Link

<a>文字装饰不起作用。

如何解决?

**

朋友们。请给出而不是否定分数,给我打电话

**

&#13;
&#13;
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;
&#13;
&#13;

2 个答案:

答案 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>