Question

我知道这应该很容易，但我的css技能有点生疏，这开始让我发疯。

我想直接从网站上的徽标移动语言文字，但对我来说没有任何作用。

这是我的HTML：

<html lang="en">
<head>
<title>SWANKY Mint Hostel</title>

<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Istok+Web" rel="stylesheet">

    </head>

    <body class="body">
    <img src="logo_piktogrami/drustvene-mreze.png" alt="mreze" class="networks">
        <div class="div-main">
        <div>
            <img src="logo_piktogrami/logo_swanky.png" alt="logo" class="logo">
        </div>
        <div class="language">UK / KR / HR</div>
        <div class="dropdown">
          <button class="dropbtn">HOSTEL</button>
          <div class="dropdown-content">
            <a href="#">O NAMA</a>
            <a href="#">POVJEST</a>
            <a href="#">MENZA</a>
            <a href="#">PARTNERI</a>
          </div>
          <button class="dropbtn">REZERVACIJA</button>
          <button class="dropbtn">GALERIJA</button>
          <button class="dropbtn">INFO</button>
          <button class="dropbtn">KAKO DO NAS</button>
        </div>
        </div>
    </body>

    </html>

这是我的CSS：

.dropbtn {
    background-color: #000000;
    color: white;
    padding: 8px;
    font-size: 10px;
    width: 100px;
    margin-right: 5px;
    font-family: 'Istok Web', sans-serif;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
    float: left;
    top: 10.3%;
    margin-left: 5px;
}

.body {
        background-color: #95e5c4;
}

.logo{
    width: 130px;
    height: 130px;
    float: left;
    margin-left: 5px;
}

.networks{
    width: 32px;
    height: 186px;
    margin-top: 7%;
}

.div-main {
    height: 735px;
    width: 685px;
    background-color: #e6e6e6;
    top: 50%;
    left: 50%;
    max-width: 1000px;
    margin: auto;
    left: 1%;
    right: 1%;
    top: 0%;
    bottom: 0%;
    position: absolute;
}

.language{
    font-family: 'Istok Web', sans-serif;
    font-weight: bold;
    margin-right: 0px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #95e5c4;
    font-family: 'Istok Web', sans-serif;
    text-align: center !important;
    font-size: 10px;
    width: 100px;
    box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #e6e6e6}

.dropdown:hover .dropdown-content {
    display: block; 
}

我现在拥有的是：

需要将文字对齐，所以我有类似的东西：

有人看到我错误地使用了哪个属性或者根本没有使用它？

Answer 1

添加：

    float: right;
    margin: 5px;

到您的.language类：）

Answer 2

首先，我添加了一些填充，然后在右侧对齐，我使用 float：right 或 CSS GRID 像这样：

.box-container{
display:grid;
grid-template-columns:auto 25%; //Or whatever value you want
}

简单地将此文本放入容器中。让我知道它是否有帮助！

将div移到最右边的css和HTML

2 个答案: