1
votes

Le champ de recherche et le bouton ne s'affichent pas sur la même ligne

J'ai un champ de recherche Woocommerce sur ma page et je veux que le bouton et le champ de recherche lui-même s'affichent sur la même ligne. J'ai essayé d'utiliser l'attribut inline-block mais cela ne semblait pas fonctionner. Code source:

form.woocommerce-product-search {
    display: inline-block ;
}

J'ai essayé d'ajouter le CSS suivant et cela n'a pas fonctionné

<div data-id="b273043" class="elementor-element elementor-element-b273043 searchbar elementor-widget elementor-widget-wp-widget-woocommerce_product_search" data-element_type="wp-widget-woocommerce_product_search.default">
                <div class="elementor-widget-container">
            <form role="search" method="get" class="woocommerce-product-search" action="https://www.naotech.com/he/">
    <label class="screen-reader-text" for="woocommerce-product-search-field-0">×—×™×¤×•×© ×¢×‘×•×¨:</label>
    <input type="search" id="woocommerce-product-search-field-0" class="search-field" placeholder="Search Products" value="" name="s" />
    <button type="submit" value="search">search</button>
    <input type="hidden" name="post_type" value="product" />
</form>

Voici un lien vers la page elle-même.

html css wordpress woocommerce

3 commentaires

Essayez simplement d'ajouter [id ^ = "woocommerce-product-search-field"] {width: auto! Important} quelque part à la fin du dernier fichier css ajouté.

Merci! a fonctionné à merveille.

Regardez ci-dessous. Je l'ai posté comme réponse

4 Réponses :

2
votes

Essayez d'ajouter la règle ! important à ce style ou de styliser les boutons input et . Notez que la règle ! Important ne doit être utilisée qu'en dernier recours car elle ne peut pas être remplacée. Au lieu de cela, vous devez remplacer les styles en utilisant l'ordre de vos styles (dans ce cas, assurez-vous que votre CSS personnalisé est inclus après le CSS WooCommerce) et en utilisant la spécificité. Voici comment définir le style de l ' input et du button :

form.woocommerce-product-search input,
form.woocommerce-product-search button
{
    display: inline-block !important;
}

2 commentaires

Cela fonctionne souvent pour ajouter body ou un autre élément parent au sélecteur. Le modificateur ! Important me donne des ruches.

Moi aussi! Et oui, une bonne suggestion, l'ajout de body rendrait le sélecteur plus spécifique et lui donnerait une priorité plus élevée :)

1
votes

La zone de saisie de recherche à l'intérieur du formulaire a une largeur: 100%. Modifiez la largeur à 50%.

0 commentaires

1
votes

Essayez simplement d'ajouter

[id^="woocommerce-product-search-field"] {
  width: auto !important;
}

quelque part à la fin du dernier fichier css ajouté

0 commentaires

2
votes

Veuillez utiliser le code ci-dessous pour implémenter le formulaire en ligne pour tous les navigateurs.

<style>
.form-inline{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
}
</style>

<form class="form-inline">
  <input type="text" name="name" placeholder="Name">
  <button type="submit">Submit</button>
</form>

0 commentaires