内联文本区域填充剩余宽度

Question

我试图使元素在用户单击时可编辑，但是我在正确放置新文本区域时遇到了一些困难。

到目前为止，这是我的工作：

 $.fn.replaceWithPush = function(a) { var $a = $(a); this.replaceWith($a); return $a; }; $(document).ready(function(){ $(".editable").click(function(event){ event.preventDefault(); switchToTextArea($(this)); }); function switchToTextArea(element) { var mnxx = element.height(); var replaced = element.replaceWithPush('<textarea name = "' + element.attr('id') + '" class = "editable" rows = "1" columns = "26">' + $(element).text() + '</textarea>'); $(replaced).css({"min-height": (mnxx + 20) + "px"}); $(replaced).focus(); $(replaced).parent().addClass('editable'); $(replaced).focusout(function(){ var data = {id: author }; data[$(replaced).attr('name')] = $(replaced).val(); $.ajax({ method: "POST", url: templateDir.concat('/updatedetails.php'), data: data }) switchBack($(this), element.clone().wrap('<div>').parent().html()); return false; }); $(replaced).blur(function(){ switchBack($(this), element.clone().wrap('<div>').parent().html()); }); } function switchBack(element, previous) { var replaced = element.replaceWithPush(previous).text( $(element).val()); $(replaced).click(function(event){ event.preventDefault(); switchToTextArea($(this)); }); $(replaced).parent().removeClass('editable'); } }); 

 ul textarea { position: relative; border-radius: 5px; width: 100%; line-height: 1.2em; margin: 0px; text-indent: 0px; border: 1px solid rgba(93, 173, 226, 0); -webkit-animation: borderin 0.5s forwards; animation: borderin 0.5s forwards; display: inline-block; padding: 0.25em; } ul { position: relative; border-top: 1px solid #dcdcdc; color: #000; font-weight: normal; list-style: none; } ul a.call { color: #6ab4e4; } a { color:inherit; text-decoration: none; } ul.editable:after { position: absolute; width: 25px; height: 25px; right: -12px; top: -12px; background-color: #5DADE2; content: '\\2714'; border-radius: 50%; z-index: 1; color: #fff; text-align: center; line-height: 25px; cursor: pointer; -webkit-animation: fadeIn 0.5s forwards; animation: fadeIn 0.5s forwards; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } 

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <br/> <li><i class="fa fa-phone-square"></i>&nbsp;&nbsp;<a href = "#" class = "call editable" id = "phone">Call this agent at <?php echo get_user_meta(get_the_author_meta( 'ID' ), 'LC_Phone', true); ?></a></li> <li><i class="fa fa-envelope-square"></i>&nbsp;&nbsp;<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">michaelnewman@gmail.com</a></li> <li><i class="fa fa-facebook-square"></i>&nbsp;&nbsp;<a href = "#">Michael Newman</a></li> <li><i class="fa fa-google-plus-square"></i>&nbsp;&nbsp;<a href = "#">Michael Newman</a></li> <li><i class="fa fa-twitter-square"></i>&nbsp;&nbsp;<a href = "#">Michael Newman</a></li> <br/> </ul> 

http://jsfiddle.net/off89dmh/1/

我试图做的是消除width: 100%从textarea的样式中删除width: 100% ，并用jQuery填充剩余的宽度，但是我希望textarea用纯CSS填充所有剩余的宽度。

在我的jsFiddle中，如果单击“在此呼叫此代理”，您会注意到textarea被放置在下面一行，但是我希望textarea填充所有剩余的宽度，并与图标对齐。

Answer 1

原因是您同时设置了width和padding 。 请使用border-box box-sizing属性：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

并提供此属性：

width: 90%;

小提琴： http : //jsfiddle.net/off89dmh/3/

Answer 2

对CSS进行以下更改：

• 添加li {display: flex;}

这将指示li的孩子使用flexbox模型，从而允许他们填充剩余的空间。 这应该确保textarea显示在图标旁边，并占用剩余空间直到父li的右边缘。

 $.fn.replaceWithPush = function(a) { var $a = $(a); this.replaceWith($a); return $a; }; $(document).ready(function() { $(".editable").click(function(event) { event.preventDefault(); switchToTextArea($(this)); }); function switchToTextArea(element) { var mnxx = element.height(); var replaced = element.replaceWithPush('<textarea name = "' + element.attr('id') + '" class = "editable" rows = "1" columns = "26">' + $(element).text() + '</textarea>'); $(replaced).css({ "min-height": (mnxx + 20) + "px" }); $(replaced).focus(); $(replaced).parent().addClass('editable'); $(replaced).focusout(function() { var data = { id: author }; data[$(replaced).attr('name')] = $(replaced).val(); $.ajax({ method: "POST", url: templateDir.concat('/updatedetails.php'), data: data }) switchBack($(this), element.clone().wrap('<div>').parent().html()); return false; }); $(replaced).blur(function() { switchBack($(this), element.clone().wrap('<div>').parent().html()); }); } function switchBack(element, previous) { var replaced = element.replaceWithPush(previous).text($(element).val()); $(replaced).click(function(event) { event.preventDefault(); switchToTextArea($(this)); }); $(replaced).parent().removeClass('editable'); } }); 

 li { display: flex; } ul textarea { position: relative; border-radius: 5px; width: 100%; line-height: 1.2em; margin: 0px; text-indent: 0px; border: 1px solid rgba(93, 173, 226, 0); -webkit-animation: borderin 0.5s forwards; animation: borderin 0.5s forwards; display: inline-block; padding: 0.25em; } ul { position: relative; border-top: 1px solid #dcdcdc; color: #000; font-weight: normal; list-style: none; } ul a.call { color: #6ab4e4; } a { color: inherit; text-decoration: none; } ul.editable:after { position: absolute; width: 25px; height: 25px; right: -12px; top: -12px; background-color: #5DADE2; content: '\\2714'; border-radius: 50%; z-index: 1; color: #fff; text-align: center; line-height: 25px; cursor: pointer; -webkit-animation: fadeIn 0.5s forwards; animation: fadeIn 0.5s forwards; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } 

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <br/> <li><i class="fa fa-phone-square"></i>&nbsp;&nbsp;<a href="#" class="call editable" id="phone">Call this agent at <?php echo get_user_meta(get_the_author_meta( 'ID' ), 'LC_Phone', true); ?></a> </li> <li><i class="fa fa-envelope-square"></i>&nbsp;&nbsp;<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">michaelnewman@gmail.com</a> </li> <li><i class="fa fa-facebook-square"></i>&nbsp;&nbsp;<a href="#">Michael Newman</a> </li> <li><i class="fa fa-google-plus-square"></i>&nbsp;&nbsp;<a href="#">Michael Newman</a> </li> <li><i class="fa fa-twitter-square"></i>&nbsp;&nbsp;<a href="#">Michael Newman</a> </li> <br/> </ul> 

Flexbox支持相当不错，但请注意，它不适用于旧版本的IE： http ： //caniuse.com/#feat=flexbox