K
K
KraymiKrons2021-06-15 07:05:49
css
KraymiKrons, 2021-06-15 07:05:49

How can I center the form so that the span is to the left and the input, select is to the right?

It turns out that the span is pressed to the left edge, and the select is pressed to the right edge and almost the entire page is wide

<div class="ads">
<form enctype="multipart/form-data" method="POST" action="<?php echo $_SERVER['REQUEST_URI']; ?>" >
<div class="adsmenu">
  <div class="adsfield">
  <span>Город:</span> <select name="city"><option value="1">Москва</option></select><br><br></div>
  <div class="adsfield">
    <span>Категория:</span> <select name="category">
    <option value="1">Квартиры</option>
    <option value="2">Комнаты</option>
    <option value="3">Дома</option>
  </select><br><br></div>
  <div class="adsfield">
  <span>Комнатность:</span> <select name="room">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select><br><br></div></div>

.ads {
    width: 100%;
    clear:both;
    display: block;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(1px);
    background-color: rgba(255, 255, 255, 0.5); 
}
.adsmenu {
    margin: 20px auto;
}
.adsfield {
    display: flex;
    justify-content: flex-end;
    padding: 8px;
}
.adsfield span {
    padding: 8px;
    margin-right: -350px;
    flex: 1;
    font-family: monospace;
    font-size: 15px;
    color: grey;
}
.adsfield input {
    flex: 2;
    padding: 8px 16px 8px 0;
    font-family: monospace;
    font-size: 15px;
    color: royalblue;
    border: 1px solid #EEEFF2;
    border-radius: 8px;
    outline: none;
    box-shadow: 0px 2px 8px rgb(128,128,128);
}
.adsfield select {
    flex: 2;
    padding: 8px 16px 8px 0;
    font-family: monospace;
    font-size: 15px;
    color: royalblue;
    border: 1px solid #EEEFF2;
    border-radius: 8px;
    outline: none;
    box-shadow: 0px 2px 8px rgb(128,128,128);
}
.adsfield textarea {
    flex: 2;
    padding: 8px 16px 8px 0;
    font-family: monospace;
    font-size: 15px;
    color: royalblue;
    border: 1px solid #EEEFF2;
    border-radius: 8px;
    outline: none;
    box-shadow: 0px 2px 8px rgb(128,128,128);
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question