Sign in to follow this  
romario0403

подчеркивание строки независимо от наличия текста

Recommended Posts

доброе время суток, товарищи!

задача в общем описана в названии темы, только _Ианов___ тоже должен быть подчеркнут, не могу понять как это сделать :blink:

есть бланк в нем есть как однострочные поля, так и многострочные. я пробовал засовывать текст в div с border-top'ом, но оно некатит в многострочных полях :(

помогите кто чем может плиз

Edited by romario0403

Share this post


Link to post
Share on other sites

к сожалению не подойдет, при добавлении текста он просто смещает линию вправо...таким макаром можно при выводе из базы добавлять переменную содержащую "_____"

Share this post


Link to post
Share on other sites

Можно сделать еще так


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" >
#pbox {
margin: 20px 0 0;
border-top: 1px solid black;
}
p {
position: relative;
display: inline-block;
margin: -15px 0 0 10px;
padding: 0 5px;
background: #ffffff;
}
</style>
</head>
<body>
<div id="pbox" >
<p>Text text</p>
</div>
</body>
</html>

Share this post


Link to post
Share on other sites

http://jsfiddle.net/CnZQ2/

Как вариант. Но тут будут блоками все элементы, не для каждого случая подойдёт. Зато можно управлять ориентацией текста, например так:

http://jsfiddle.net/CnZQ2/1/

Ну и наконец, побалуемся с внешним видом ))

http://jsfiddle.net/CnZQ2/9/

Edited by ViStefan

Share this post


Link to post
Share on other sites

немного не то..если текст не влезает на одну строку, то подчеквивается только последняя, будь то <p>,<div>,<h*> или любой другой блочный элемент.

решил так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" >
body {
line-height:20px;
}
#str1 {
position:relative;
float:left;
z-index:1;
}
#str2 {
position:relative;
margin-left:53px;
font-size:16px;
background-image:url('http://deadmopo3.ru/u.gif');
}
#page {
width:640px;
}
</style>
</head>
<body>
<div id="page">
<div>
<div id="str1"><b>ФИО:</b></div>
<div id="str2">текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст  </div>
</div>
<br>
<div>
</body>
</html>

вот живой пример: http://deadmopo3.ru/u_text.php

всем спасибо за помощь! :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Member Statistics

    46,333
    Total Members
    3,128
    Most Online
    sohaibkhalid614
    Newest Member
    sohaibkhalid614
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.