Мой div занимает всю ширину страницы

В моем Вебе, поскольку они будут видеть далее, я хочу, чтобы их осталось четырьмя votones в способе, и хочу, чтобы было два текста один в каждом боку. В настоящее время это оказывается так:

Главная проблема состоит в том, что я не могу помещать текст на том же уровне кнопок, потому что линия кнопок они занимают всю ширину экрана:

Кто-то мог бы давать мне руку с этим? Я хочу, чтобы остался текст бока на том же уровне кнопок центра, и хочу, чтобы был другой текст на том же уровне, но в прямом боку. Спасибо, привет.

html {
    height: 100%;
    overflow: hidden;
}
body {
    background: url(../images/BG.png);
    background-size: cover;
    background-attachment: fixed;
    text-align: center;
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}
.logo {
    margin-top: 4%;
    -webkit-animation-duration: 1500ms;
    -ms-animation-duration: 1500ms;
    -moz-animation-duration: 1500ms;
    animation-duration: 1500ms;
    display: inline-block;
    max-width: 400px;
}
@media screen and (max-width: 1384px)  {
    .logo {
    margin-top: 2%;
}
#players {
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}
}
@media screen and (max-width: 400px)  {
    html {
    overflow: visible!important;
}
}
a {
    text-decoration: none!important;
    color: white;
}
.links a {
    display: inline-block;
    list-style: none;
    font-size: 22px;
}
.logo li {
    max-width: 500px;
    list-style: none;
}
.links a {
    min-width: 125px;
    margin: 0 5px;
    -webkit-transition: all 300ms linear 0s;
    -moz-transition: all 300ms linear 0s;
    -ms-transition: all 300ms linear 0s;
    -o-transition: all 300ms linear 0s;
    transition: all 300ms linear 0s;
}
a li {
    max-width: 100%;
    display: block;
    min-height: 120px;
    background-size: 100%;
    background-repeat: no-repeat;
    -webkit-transition: all 300ms linear 0s;
    -moz-transition: all 300ms linear 0s;
    -ms-transition: all 300ms linear 0s;
    -o-transition: all 300ms linear 0s;
    transition: all 300ms linear 0s;
}
.logo li img {
    max-width: 70%;
}
.links a:hover {
    color: #FFB437;
    text-shadow: 0px 0px 10px;
    -webkit-transition: all 300ms linear 0s;
    -moz-transition: all 300ms linear 0s;
    -ms-transition: all 300ms linear 0s;
    -o-transition: all 300ms linear 0s;
    transition: all 300ms linear 0s;
}
a:hover li {
    max-width: 100%;
    display: block;
    min-height: 120px;
    background-size: 100%!important;
    background-repeat: no-repeat!important;
    -webkit-transition: all 300ms linear 0s;
    -moz-transition: all 300ms linear 0s;
    -ms-transition: all 300ms linear 0s;
    -o-transition: all 300ms linear 0s;
    transition: all 300ms linear 0s;
}
.comovotar {
    background: #3500FF;
    display: block;
    border: 4px solid #1d008c;
    border-radius: 20px;
    max-width: 295px;
    padding: 5px;
    margin: 0 auto;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.42);
    color: #FFF;
    margin-bottom: 40px;
    margin-top: 40px;
    margin-right: 1000px;
    -webkit-animation-delay: 200ms;
    -ms-animation-delay: 200ms;
    -o-animation-delay: 200ms;
    animation-delay: 200ms;
    position: relative;
}
.btn-votar1 {
    -moz-box-shadow:inset 0px 1px 0px 0px #7c89ed;
    -webkit-box-shadow:inset 0px 1px 0px 0px #7c89ed;
    box-shadow:inset 0px 1px 0px 0px #7c89ed;
    background:-webkit-linear-gradient(top, #000dff 5%, #0d15ab 100%);
    background:-moz-linear-gradient(top, #000dff 5%, #0d15ab 100%);
    background:-ms-linear-gradient(top, #000dff 5%, #0d15ab 100%);
    background:-o-linear-gradient(top, #000dff 5%, #0d15ab 100%);
    background:linear-gradient(to bottom, #000dff 5%, #0d15ab 100%);
    background-color:#000dff;
    -webkit-border-top-left-radius:37px;
    -moz-border-radius-topleft:37px;
    border-top-left-radius:37px;
    -webkit-border-top-right-radius:0px;
    -moz-border-radius-topright:0px;
    border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:37px;
    -moz-border-radius-bottomright:37px;
    border-bottom-right-radius:37px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-bottomleft:0px;
    border-bottom-left-radius:0px;
    text-indent:0;
    border:4px solid #2b138f;
    display:inline-block;
    color:#ffffff;
    font-family:Verdana;
    font-size:20px;
    font-weight:bold;
    font-style:normal;
    height:60px;
    line-height:60px;
    width:110px;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #7f86fa;
}
.btn-votar1:hover {
    background:-webkit-linear-gradient(top, #0d15ab 5%, #000dff 100%);
    background:-moz-linear-gradient(top, #0d15ab 5%, #000dff 100%);
    background:-ms-linear-gradient(top, #0d15ab 5%, #000dff 100%);
    background:-o-linear-gradient(top, #0d15ab 5%, #000dff 100%);
    background:linear-gradient(to bottom, #0d15ab 5%, #000dff 100%);
    background-color:#0d15ab;
}
.btn-votar1:active {
    position:relative;
    top:1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>Votar - BladePvP Network</title>

	<meta name="description" content="BladePvP Network es un servidor no premium disponible para las versiones 1.8 hasta 1.11 de minecraft. IP: mc.bladepvp.net">
	<meta name="tags" content="minecraft, mc, website, play, factions, network, annihilation, server, skywars, nightcore, hcf, uhc, pvp">
 
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div class="animated fadeIn logo">
<h6 style="font-family:verdana;font-size:30px;color:white;"><strong>Vota por nosotros</strong></h6>
</div>
<div class="links">
<a href="#" class="btn-votar1">Votar #1</a>
<a href="#" class="btn-votar1">Votar #2</a>
<a href="#" class="btn-votar1">Votar #3</a>
<a href="#" class="btn-votar1">Votar #4</a>
</div>
<aside>
	<div class="comovotar"><h3><strong>¿Por qué votar?</strong></h3>
		<h4>Al votar, estás ayudándonos a ser una comunidad más grande y sólo por hacer unos clicks, ¡te llevarás buenos premios!</h4>
	</div>
</aside>
</body>
</html>
0
задан 27.01.2017, 04:20
0 ответов

Ты мог бы пробовать плавая в левую сторону и правую сторону соответственно тексты концов и ориентировать кнопки. Проверяемый пример:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.btn {
  padding: .5em;
  border: 1px solid #000;
  display: inline-block;
}

.container {
  width: 80%;
  margin: auto;
  text-align: center;
}

.text.left {
  float: left;
  text-align: left;
}

.text.right {
  float: right;
}

.text {
  padding: .5em;
  width: 100px;
  display: inline-block;
  border: 1px solid #000;
}
<div class="container">
    <div class="text left">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, ex.
    </div>

    <a href="#" class="btn">Votar 1</a>
    <a href="#" class="btn">Votar 2</a>
    <a href="#" class="btn">Votar 3</a>
    <a href="#" class="btn">Votar 4</a>

    <div class="text right">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, ex.
    </div>
  </div>
1
ответ дан 03.12.2019, 17:28
  • 1
    Стоит Мауро, así sí он размещается хорошо. Но остаются слишком узкими тексты, habrí в какой-то способ делать их má s широкие? останься уродливым, что были конечными. –  27.01.2017, 05:15
  • 2
    Ах, уже está ahí encontré что в классе " text" был width в 100px, уже subí и видят хорошо. Большое спасибо Мауро. Увидимся! –  27.01.2017, 05:17