Jump to content
  • 0

Иконка на одинаковом расстоянии от текста


SnowSilver
 Share

Question

Как отобразить слово "Иконка" на одинаковом расстоянии от текста ?

Там получается, что текст не вмещается в строку, переносится на другую строку, тег h5 растягивается в ширину(так как текст не влазит в строку), из за этого получается отступ большой от иконки... а надо что в любом случае было одинаковое расстояние... подскажите как это сделать? как можно это обойти... желательно, чтобы ширина div.g оставалось 26%

Исходник:

<!DOCTYPE html> <html>

<head>     <title></title>    

<style type="text/css">      

  h5 {            

position: relative;        

display: inline-block;

}

span {

position: absolute;

top: 0;

right: -56px;

}

.g {

width: 26%;

}  

</style>

</head>

<body>    

<div>        

<DIV class='g'>

<h5>строка большая<span>Иконка</span></h5></DIV>        

<DIV class='g'><h5>строка большая строка большая<span>Иконка</span></h5></div>  

  </div>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

question.png

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
7 часов назад, Svetlana_P сказал:

Вы можете, пожалуйста, выложить пример в песочницу? Чтобы всем было проще :)

Пожалуйста: https://jsfiddle.net/o7exdyya/

 

Сейчас результат в скрине 1. А надо как в скрине 2 - то есть. иконка от текста всегда должна быть на одном расстоянии. На первом скрине, где две строчки, иконка далеко уехала... потому что блок h5 растянулся...

question.png

question2.png

7 часов назад, mrnobody сказал:

Да, не понятно к какому виду нужно привести.

Так? 

 

иконка всегда должна быть на одном расстоянии от текста

В вашем примере, иконки находятся на разном растоянии от текста, Скрин1. Во втором скрине приведено, как доолжно быть

 

Например, расстоянии иконки от текста всегда 10 px

question.png

question2.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy