Как я могу расположить этот текст в div? - PullRequest
Новая
       1

Как я могу расположить этот текст в div?

0 голосов
/ 02 ноября 2019

Я пытаюсь построить регистрационную форму Ebay. Сверху я хочу переместить текст для входа вправо, рядом с Ebay pic, попытался плавать и выровнять текст, и ни один из них не работает

screenshot

HTML 

<div class="top1">
  <img src="pic/eb.png"/>
  <P id="sigin">Already a member?<a href="https://signin.ebay.com">Sign in</a></P>
</div>

CSS 

.top1{
  height: 25%;
  width: 100;
}

#sigin{
  float:right;
  text-align: right;
  font-weight:bold;
  font-size:18px;
}

Ответы [ 6 ]

0 голосов
/ 02 ноября 2019

Привет, Каслан. Надейся, это сработает для тебя 

.top1{
        display:inline;
         height: 25%;
        width: 100%;
}
img{
  display: inherit;

}

p {
  display: inherit;
  text-align:right;
}
#sigin{

  text-align: right;
  font-weight:bold;
  font-size:18px;
}

HTML останется прежним 

 <div class="top1">
  <img src="pic/eb.png"/>
  <P id="sigin">Already a member?<a href="https://signin.ebay.com">Sign in</a></P>
</div>
0 голосов
/ 02 ноября 2019

использовать flexbox

только что проверил это, и он отлично работает. 

<!DOCTYPE html>

<html>

    <div class="top1">
        <img src="pic/eb.png"/>
        <P id="sigin">Already a member?<a href="https://signin.ebay.com">Sign in</a></P>
    </div>




      <style>
        .top1{
            display: flex;
            flex-direction: row;
            height: 25%;
            width: 100;
        }

        #sigin{
            text-align: right;
            font-weight:bold;
            font-size:18px;
        }
      </style>
</html>
0 голосов
/ 02 ноября 2019

Попробуйте использовать Положение: 

.top1 {
  position: relative;
 }

#sigin {
 margin-right: 10px;
  position: absolute;
  left: 20px;
  top: 4px;
}
0 голосов
/ 02 ноября 2019

Попробуйте вот так 

<div class="top1">
 <img src="pic/eb.png"/>
 <p id="sigin">Already a member?
  <a href="https://signin.ebay.com">Sign in</a>
 </p>
</div>

CSS: 

.top1 {
  height: 25%;
  width: 100;
  display: flex;
}

#sigin {
 margin-right: 10px;
}
0 голосов
/ 02 ноября 2019

Создайте ul и сделайте работу как строку, установите в ней элементы и установите для нее float:left. Ниже фрагмент работает правильно, но у меня нет изображения src, поэтому логотип пуст, он будет работатьнормально на вашем устройстве. 

ul{
  list-style-type:none;
}
ul li{
float:left;
}
.top1{
  height: 25%;
  width: 100;
}
<ul>
  <li class='top1'><img src="pic/eb.png"/></li> 
  <li><P id="sigin">Already a member?
<a href="https://signin.ebay.com">Sign in</a></P></li>
</ul>
0 голосов
/ 02 ноября 2019

Так как это плавающее право, тег входа должен быть помещен перед изображением. О, пожалуйста, используйте <p> вместо <P>

...